六、CSS入门

CSS核心基础


CSS样式规则


选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}

CSS代码结构中的特点
CSS样式中的选择器严格区分大小写,属性和值不区分大小写,按照书写习惯一般将“选择器、属性和值”都采用小写的方式。

多个属性之间必须用英文状态下的分号隔开,最后一个属性后的分号可以省略,但是,为了便于增加新样式最好保留。

如果属性的值由多个单词组成且中间包含空格,则必须为这个属性值加上英文状态下的引号。

在编写CSS代码时,为了提高代码的可读性,通常会加上CSS注释。
在CSS代码中空格是不被解析的,花括号以及分号前后的空格可有可无。

属性和属性值之间不允许出现空格,否则浏览器会报错


引入CSS样式表


优先级:
   如果三种样式同时控制我们的内容:行内优先级最高
   外部样式,内部样式:谁离着内容近,谁优先级高

1、行内式
行内式也称为内联样式,是通过标记的style属性来设置元素的样式
<标记名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标记名>

style是标记的属性,实际上任何HTML标记都拥有style属性,用来设置行内式。其中属性和值的书写规范与CSS样式规则相同,行内式只对其所在的标记及嵌套在其中的子标记起作用。



2、内嵌式
内嵌式是将CSS代码集中写在HTML文档的<head>头部标记中,并且用<style>标记定义
<style>标记定义,其基本语法格式如下:
<head>
<style type="text/css">
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>

<style>标记一般位于<head>标记中<title>标记之后,也可以把他放在HTML文档的任何地方。


3、链入式
链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中,通过<link />标记将外部样式表文件链接到HTML文档中
<head>
<link href="CSS文件的路径" type="text/css" rel="stylesheet" />
</head>

<link />标记需要放在<head>头部标记中,并且必须指定<link />标记的三个属性
href:定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径。
type:定义所链接文档的类型,在这里需要指定为“text/css”,表示链接的外部文件为CSS样式表。
rel:定义当前文档与被链接文档之间的关系,在这里需要指定为“stylesheet”,表示被链接的文档是一个样式表文件。


4、导入式
导入式与链入式相同,都是针对外部样式表文件的。对HTML头部文档应用style标记,并在<style>标记内的开头处使用@import语句,即可导入外部样式表文件
<style type="text/css" >
@import url(css文件路径);或 @import "css文件路径";
/* 在此还可以存放其他CSS样式*/
</style> 
style标记内还可以存放其他的内嵌样式,@import语句需要位于其他内嵌样式的上面。



CSS基础选择器


概述
要想将CSS样式应用于特定的HTML元素,首先需要找到目标元素
在CSS中执行这一任务的样式规则部分被称为选择器
1、标记(元素)选择器
标签名{

是指用HTML标记名称作为选择器,按标记名称分类,为页面中某一类标记指定统一的CSS样式
标记名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
例如:p{ font-size:12px; color:#666; font-family:"微软雅黑";}

最大的优点是能快速为页面中同类型的标记统一样式,同时这也是他的缺点,不能设计差异化样式。


2、类选择器
前提:标签内有class
.class值{

类选择器使用“.”(英文点号)进行标识,后面紧跟class类名
.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

最大的优势是可以为元素对象定义单独或相同的样式



3、 id选择器
#id值{

使用“#”进行标识,后面紧跟id名
#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

id选择器和类选择器的值不能以数字开头;用字母开头   a12   12a(不行)

id名即为HTML元素的id属性值,大多数HTML元素都可以定义id属性,元素的id值是唯一的,只能对应于文档中某一个具体的元素。


4、通配符选择器
用“*”号表示,他是所有选择器中作用范围最广的,能匹配页面中所有的元素
*{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

使用通配符选择器定义CSS样式,清除所有HTML标记的默认边距
* {
margin: 0;                    /* 定义外边距*/
padding: 0;                  /* 定义内边距*/
}

属性选择器
标签名[标签属性=‘值‘] {
}
概述
在标签后面使用中括号标记
是对“元素选择器”的扩展,对一组标签进一步过滤

语法格式
标签名[标签属性=‘标签属性值‘]{属性名:属性值;……}

包含选择器
外层标签 内层标签{

概述
两个标签之间使用空格,给指定父标签的后代标签设置样式,可以方便在区域内编写
语法格式
父标签 后代标签{属性名:属性值;……}



CSS文本样式


CSS字体样式属性


1、font-size:字号大小
用于设置字号,该属性的值可以使用相对长度单位,也可以使用绝对长度单位
相对长度单位比较常用,推荐使用像素单位px,绝对长度单位使用较少
em 相对于当前对象内文本的字体尺寸
px 像素,最常用,推荐使用
绝对长度单位 说明
in 英寸
cm 厘米
mm 毫米

pt


2、font-family:字体
用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等
将网页中所有段落文本的字体设置为微软雅黑

p{ font-family:"微软雅黑";}


可以同时指定多个字体,中间以逗号隔开,表示如果浏览器不支持第一个字体,则会尝试下一个
例如:body{font-family:"华文彩云","宋体","黑体";}
注意
各种字体之间必须使用英文状态下的逗号隔开。
中文字体需要加英文状态下的引号,英文字体一般不需要加引号。当需要设置英文字体时,英文字体名必须位于中文字体名之前。
如果字体名中包含空格、#、$等符号,则该字体必须加英文状态下的单引号或双引号,例如font-family: "Times New Roman";。

尽量使用系统默认字体,保证在任何用户的浏览器中都能正确显示。


3、font-weight:字体粗细

用于定义字体的粗细,其可用属性值:normal(默认)、bold(粗体)、bolder(更粗)、lighter(更细)、100~900(100的整数倍)【400等同于normal,700等同于bold】


4、font-variant:变体
用于设置变体(字体变化),一般用于定义小型大写字母,仅对英文字符有效
其可用属性值:
normal:默认值,浏览器会显示标准的字体。

small-caps:浏览器会显示小型大写的字体,即所有的小写字母均会转换为大写。但是所有使用小型大写字体的字母与其余文本相比,其字体尺寸更小。



5、font-style:字体风格
用于定义字体风格,如设置斜体、倾斜或正常字体,其可用属性值:
normal:默认值,浏览器会显示标准的字体样式。
italic:浏览器会显示斜体的字体样式。
oblique:浏览器会显示倾斜的字体样式。


6、font:综合设置字体样式
选择器{font: font-style  font-variant  font-weight  font-size/line-height  font-family;}
必须按上面语法格式中的顺序书写,各个属性以空格隔开。


其中不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性,否则font属性将不起作用。
例如:
p{ font-family:Arial,"宋体"; font-size:30px; font-style:italic; font-weight:bold; 
font-variant:small-caps; line-height:40px;}
等价于
p{ font:italic small-caps bold 30px/40px Arial,"宋体" ;}


CSS文本外观属性


1、color:文本颜色
预定义的颜色值,如red,green,blue等。
十六进制,如#FF0000,#FF6600,#29D794等。实际工作中,十六进制是最常用的定义颜色的方式。
RGB代码,如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。

需要注意的是,如果使用RGB代码的百分比颜色值,取值为0时也不能省略百分号,必须写为0%。


2、letter-spacing:字间距

所谓字间距就是字符与字符之间的空白。其属性值可为不同单位的数值,允许使用负值,默认为normal。


3、word-spacing:单词间距
用于定义英文单词之间的间距,对中文字符无效。和letter-spacing一样,其属性值可为不同单位的数值,允许使用负值,默认为normal。

word-spacing和letter-spacing均可对英文进行设置。不同的是letter-spacing定义的为字母之间的间距,而word-spacing定义的为英文单词之间的间距。


4、line-height:行间距
用于设置行间距,就是行与行之间的距离,即字符的垂直间距,一般称为行高
常用的属性值单位有三种,分别为像素px,相对值em和百分比%,实际工作中使用最多的是像素px。
5、text-transform:文本转换
用于控制英文字符的大小写,其可用属性值:
none:不转换(默认值)。
capitalize:首字母大写。
uppercase:全部字符转换为大写。

lowercase:全部字符转换为小写。



6、text-decoration:文本装饰
用于设置文本的下划线,上划线,删除线等装饰效果,其可用属性值如下:
none:没有装饰(正常文本默认值)。
underline:下划线。
overline:上划线。
line-through:删除线。
text-decoration后可以赋多个值,用于给文本添加多种显示效果,例如希望文字同时有下划线和删除线效果,就可以将underline和line-through同时赋给text-decoration。


7、text-align:水平对齐方式
用于设置文本内容的水平对齐,相当于html中的align对齐属性。其可用属性值如下:
left:左对齐(默认值)
right:右对齐
center:居中对齐


例如:h2{ text-align:center;}
8、text-indent:首行缩进
用于设置首行文本的缩进,其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%,允许使用负值, 建议使用em作为设置单位。


9、white-space:空白符处理
其属性值如下:
normal:常规(默认值),文本中的空格、空行无效,满行(到达区域边界)后自动换行。
pre:预格式化,按文档的书写格式保留空格、空行原样显示。
nowrap:空格空行无效,强制文本不能换行,除非遇到换行标记<br />。内容超出元素的边界也不换行,若超出浏览器页面则会自动增加滚动条。


CSS高级特性


CSS复合选择器


复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的
1、标签指定式选择器
又称交集选择器,由两个选择器构成,其中第一个为标记选择器,第二个为class选择器或id选择器,两个选择器之间不能有空格,如h3.special或p#one。


2、后代选择器
用来选择元素或元素组的后代,其写法就是把外层标记写在前面,内层标记写在后面,中间用空格分隔。当标记发生嵌套时,内层标记就成为外层标记的后代。


3、并集选择器
是各个选择器通过逗号连接而成的,任何形式的选择器(包括标记选择器、class类选择器id选择器等),都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同,或部分相同,就可以利用并集选择器为它们定义相同的CSS样式。



层叠性


是指多种CSS样式的叠加。例如,当使用内嵌式CSS样式表定义<p>标记字号大小为12像素,链入式定义<p>标记颜色为红色,那么段落文本将显示为12像素红色,即这两种样式产生了叠加。



继承性


是指书写CSS样式表时,子标记会继承父标记的某些样式,如文本颜色和字号。想要设置一个可继承的属性,只需将它应用于父元素即可。

不具有继承性:边框、外边距、内边距、背景、定位、布局、元素宽高属性。

CSS优先级


定义CSS样式时,经常出现两个或更多规则应用在同一元素上,这时就会出现优先级的问题。
p{ color:red;}              /*标记样式*/
.blue{ color:green;}       /*class样式*/
#header{ color:blue;}      /*id样式*/
对应的HTML结构为:
<p id="header" class="blue">
帮帮我,我到底显示什么颜色?
</p>
标记选择器具有权重1,类选择器具有权重10,id选择器具有权重100。因此文本显示为蓝色
继承样式的权重为0。即在嵌套结构中,不管父元素样式的权重多大,被子元素继承时,他的权重都为0,也就是说子元素定义的样式会覆盖继承来的样式。
strong{ color:red;}
#header{ color:green;}
对应的HTML结构为:
<p id="header" class="blue">
<strong>继承样式不如自己定义</strong>
</p>


虽然#header具有权重100,但被strong继承时权重为0,而strong选择器的权重虽然仅为1,但它大于继承样式的权重,所以页面中的文本显示为红色。

行内样式优先。应用style属性的元素,其行内样式的权重非常高,可以理解为远大于100。总之,他拥有比上面提高的选择器都大的优先级。 

权重相同时,CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级,或者说排在最后的样式优先级最大
CSS定义了一个!important命令,该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近,!important都具有最大优先级。

相关推荐