鱼C论坛

 找回密码
 立即注册
查看: 3204|回复: 0

[技术交流] CSS

[复制链接]
发表于 2017-12-26 20:59:35 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
本帖最后由 py大神 于 2018-1-2 00:56 编辑

CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等。



CSS的三种写法:
        1.直接在头部(即head标签)写:即写在<style></style>标签里

        2.引入外部CSS样式。即HTML文件和CSS样式分离,使用link标签链接CSS文件。其中<link href="" rel="stylesheet" type="text/css">其中的rel和type的写法都是固定的。

        3.在标签属性里style里面写。即在标签属性里加上style属性。这种方式过于繁琐,只适合临时使用。

        其中第三种写法的优先级最高,因为html遵循就近原则。
CSS选择器:这是根本
        通过选择器选择选中元素要使用的CSS样式。
        1.标签选择器:
                                写法:标签名 { 方法:属性;} 如:h1 {color: red;} 别忘了最后的分号。
        2.id选择器:
                                写法:#标签名 { 方法:属性;} 如:#one { background: red;}
        3.class选择器:
                                写法:.标签名 { 方法:属性;} 如:.a { background: red;}

CSS背景色和尺寸:
        像素:我们的电脑屏幕之所以能显示图像,其实是因为图像是由一个个的像素点组成的。屏幕上的一个像素点就是一像素,表示出来就是1px
        尺寸:
       
  1. body {
  2.                                 width: xxxpx;
  3.                                 height: xxxpx;
  4.                                 max-width:
  5.                                 max-height:
  6.                                 min-width:
  7.                                 min-height:
  8.                                 line-height:
  9.                         }
复制代码

        背景色:
       
  1. body {
  2.                                         background-color:
  3.                                 }
复制代码

        CSS颜色:
                        十六进制:#CCCCCC(灰色),#000000(黑色),#FFFFFF(白色)等,这些颜色值,我们可以通过一些工具来识别,不需要特殊记忆。
                        RGB:rgb(255,255,255),这个用得少,也可以通过工具识别。
                        名称:red(红色),gray(灰色),lightred(亮红),lightgreen(亮绿色),darkgreen(深绿色)
        背景图像:
               
  1. body {
  2.                                                 background-image: url('图片路径');
  3.                                         }
复制代码

        图像平铺:
               
  1. body {
  2.                                                 background-image: url('图片路径');
  3.                                                 background-repeat: no-repeat;
  4.                                                 background-repeat: repeat-x;
  5.                                                 background-repeat: repeat-y;
  6.                                         }
复制代码

        图像位置:
               
  1. body {
  2.                                                 background-image: url('图片路径');
  3.                                                 background-repeat: no-repeat;
  4.                                                 background-repeat: repeat-x;
  5.                                                 background-position: right top;
  6.                                         }
复制代码

        简写方式:
               
  1. body {
  2.                                                 background: red url('')  no-repeat top;
  3.                                         }//这里的属性的顺序是否可以改变?
  4.                        
复制代码

css 样式由选择符和声明组成,而声明又由属性和值组成,如下图所示:
52fde5c30001b0fe03030117.jpg
选择符:又称选择器,指明网页中要应用样式规则的元素,如本例中是网页中所有的段(p)的文字将变成蓝色,而其他的元素(如ol)不会受到影响。
声明:在英文大括号“{}”中的的就是声明,属性和值之间用英文冒号“:”分隔。当有多条声明时,中间可以英文分号“;”分隔,如下所示:
p{font-size:12px;color:red;}
注意:
1、最后一条声明可以没有分号,但是为了以后修改方便,一般也加上分号。
2、为了使用样式更加容易阅读,可以将每条代码写在一个新行内,如下所示:
p{
   font-size:12px;
   color:red;
}

就像在Html的注释一样,在CSS中也有注释语句:用/*注释语句*/来标明(Html中使用<!--注释语句-->)。

CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式、嵌入式和外部式三种。这一小节先来讲解内联式。
内联式css样式表就是把css代码直接写在现有的HTML标签中,如下面代码:
<p style="color:red">这里文字是红色。</p>
注意要写在元素的开始标签里,下面这种写法是错误的:
<p>这里文字是红色。</p style="color:red">
并且css样式代码要写在style=""双引号中,如果有多条css样式代码设置可以写在一起,中间用分号隔开。如下代码:
<p style="color:red;font-size:12px">这里文字是红色。</p>

嵌入式css样式,写在当前的文件中
现在有一任务,把右侧编辑器中的“超酷的互联网”、“服务及时贴心”、“有趣易学”这三个短词文字字号修改为18px。如果用上节课我们学习的内联式css样式的方法进行设置将是一件很头疼的事情(为每一个<span>标签加入sytle="font-size:18px"语句),本小节讲解一种新的方法嵌入式css样式来实现这个任务。
嵌入式css样式,就是可以把css样式代码写在<style type="text/css"></style>标签之间。如下面代码实现把三个<span>标签中的文字设置为红色:
<style type="text/css">
span{
color:red;
}
</style>
嵌入式css样式必须写在<style></style>之间,并且一般情况下嵌入式css样式写在<head></head>之间。

外部式css样式,写在单独的一个文件中
外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css”为扩展名,在<head>内(不是在<style>标签内)使用<link>标签将css样式文件链接到HTML文件内,如下面代码:
<link href="base.css" rel="stylesheet" type="text/css" />
注意:
1、css样式文件名称以有意义的英文字母命名,如 main.css。
2、rel="stylesheet" type="text/css" 是固定写法不可修改。
3、<link>标签位置一般写在<head>标签之内。

这三种样式是有优先级的,记住他们的优先级:内联式 > 嵌入式 > 外部式
但是嵌入式>外部式有一个前提:嵌入式css样式的位置一定在外部式的后面。如右代码编辑器就是这样,<link href="style.css" ...>代码在<style type="text/css">...</style>代码的前面(实际开发中也是这么写的)。感兴趣的小伙伴可以试一下,把它们调换顺序,再看他们的优先级是否变化。
其实总结来说,就是--就近原则(离被设置元素越近优先级别越高)。
但注意上面所总结的优先级是有一个前提:内联式、嵌入式、外部式样式表中css样式是在的相同权值的情况下,什么是权值呢?在后面的9-2小节中会讲解到。

什么是选择器?
每一条css样式声明(定义)由两部分组成,形式如下:
选择器{
    样式;
}
在{}之前的部分就是“选择器”,“选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素。比如右侧代码编辑器中第7行代码中的“body”就是选择器。

标签选择器其实就是html代码中的标签。如右侧代码编辑器中的<html>、<body>、<h1>、<p>、<img>。例如下面代码:
p{font-size:12px;line-height:1.6em;}
上面的css样式代码的作用:为p标签设置12px字号,行间距设置1.6em的样式。

类选择器在css样式编码中是最常用到的,如右侧代码编辑器中的代码:可以实现为“胆小如鼠”、“勇气”字体设置为红色。
语法:
.类选器名称{css样式代码;}
注意:
1、英文圆点开头
2、其中类选器名称可以任意起名(但不要起中文噢)
使用方法:
第一步:使用合适的标签把要修饰的内容标记起来,如下:
<span>胆小如鼠</span>
第二步:使用class="类选择器名称"为标签设置一个类,如下:
<span class="stress">胆小如鼠</span>
第三步:设置类选器css样式,如下:
.stress{color:red;}/*类前面要加入一个英文圆点*/

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-3-29 08:06

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表