CSS-----层叠样式表(级联页面中文本的内容样式表)
作用:主要用于设置HTML(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。
在HTML中应用css有三种方式:
1、行内式(内联样式):通过标签的style属性来设置元素的样式。
基本语法格式:
<标签名 style="属性1:属性值1;属性2:属性值2;">内容</标签名>
2、内嵌式(内部样式表):将css代码集中写在HTML文档的head头部标签中,并用style标签定义。
基本语法格式:
<style type="text/css">css样式定义</style>
3、外链式(外部样式):把所有的样式放在一个或多个以css为扩展名的外部样式表文件中,通过link标签将外部样式表文件链接到HTML文档中。
基本语法格式:
<link rel="stylesheet" type="text/css" href="css文件">
注:href:定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径。
type:定义所链接文档的类型,在这里需要制定为"text/css",表示链接的外部文件为css样式表。
rel:定义当前文档与被链接文档之间的关系,在这里需要制定为"stylesheet",表示被链接的文档是一个样式表文件。
css样式规则的具体格式:
一、选择器(重点)
1、css基础选择器
1.1标签选择器(元素选择器):是指用HTML标签名作为选择器,按标签名称分类。为页面中某一类标签指定同一的css样式。
基本语法格式:
标签名 {
属性1: 属性值1;
属性2: 属性值2;
}
优点:能快速为页面中同类型的标签统一样式。
缺点:不能设计差异化样式。
标签选择器可以把某一类标签全部选择出来 div span
1.2类选择器:使用"."进行标识,后面紧跟类名。
基本语法格式:
.类名 {
属性1: 属性值1;
属性2: 属性值2;
}
标签调用用class="类名" 即可。
优点:可以为元素对象定义单独或相同的样式,可以选择一个或多个标签。
小技巧:
长名称或词组可以视同中横线来为选择器命名。
不建议使用"_"下划线来命名css选择器。(JavaScript变量命名规则用"_")。
不要纯数字、中文等命名,尽量用英文字母来表示。
1.3 多类名选择器:我们可以给标签指定多个类名,从而达到更多的选择目的。
注意:
样式显示效果跟HTML元素中的类名先后顺序没有关系,受css样式书写的上下顺序有关。
各类名中间用空格隔开。
多类名选择器在后期布局比较复杂的情况下,还是较多使用的。
1.4 id选择器:使用"#"进行标识,后面紧跟id名。
基本语法格式:
id名 {
属性1: 属性值1;
属性2: 属性值2;
}
该语法中,id名即为HTML元素的id属性值,大多数HTML元素都可以定义id属性,元素的id值是唯一的,只能对应于文档中某一个具体的元素。
用法和类名选择器相同。
1.5 通配符选择器:用"*"号表示,是所有选择器中作用范围最广的,能匹配页面中所有的元素。
基本语法格式:
* {
属性1:属性值1;
属性2:属性值2;
}
一般只用于清除HTML标记的默认边距:
* {
margin:0;/*定义外边距*/
padding:0;/*定义内边距*/
}
2、css复合选择器:
是由两个或多个基础选择器,通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。
2.1 交集选择器:由两个选择器构成,其中第一个为标签选择器,第二个为类选择器,两个选择器之间不能有空格,如h3 .special。(用的相对来说比较少,不建议使用)。
举例: p .one 选择的是:类名为 .one的 段落标签。
2.2并集选择器:是各个选择器通过逗号连接而成的,任何形式的选择器(包括标签选择器、class类选择器、id选择器)等),都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同或部分相同,就可以利用并集选择器为他们定义相同的css样式。
举例:.one, p, #test {color: #F00;}表示: .one和p和#test这三个选择器都会执行颜色为红色。通常用于集体声明。
2.3后代选择器(包含选择器):用来选择元素或元素组的后代,其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签的后代。
子孙后代都可以这么选择,它能选择任何包含在内的标签。
2.4 子代选择器:只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面,子级标签写在后面,中间跟一个>进行连接,注意,符号左右两侧各保留一个空格。
注意:这里的子指的是亲儿子,不包含孙子,重孙子之类的。
举例 :.demo > h3 {color: red;} 说明:h3一定是demo亲儿子,demo包含着h3.
2.5 伪类选择器:用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,比如可以选择第一个,第n个元素。
类 .one 伪类 :link (类选择器是一个点 伪类是两个点)
链接伪类选择器:
:link /*未访问的链接*/
:visited/*已访问的链接*/
:hover /*鼠标移动到链接上*/
:active /*选定的链接*/
二、标签显示模式(display)
HTML标签一般分为块级标签(block)、行内标签(inline)和行内块标签(inline-block)。
1、块级元素(block):每个块元素通常都会独自占据一整行或多行,可以对其设置宽度、高度、对齐等属性,常用于网页布局和网页结构的搭建。
常见块级元素:<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等。
块级元素的特点:
总是从新行开始。
高度,行高,外边距以及内边距都可以控制。
宽度默认是容器的100%。
可以容纳内联元素和其他块元素。
2、行内元素(inline):不占有独立的区域,仅仅靠自身的字体大小和图像尺寸来支撑结构,一般不可以设置宽度、高度、对齐等属性,常用于控制页面中文本的样式。
常见行内元素:<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等。
行内元素的特点:
和相邻行内元素在一行上。
高、宽无效,但水平方向的padding和margin可以设置,垂直方向的无效。
默认宽度就是它本身内容的宽度。
行内元素只能容纳文本或者其他行内元素(a特殊,a里面可以放块级元素)。
注意:
只有文字才能组成段落,因此p里面不能放块级元素,同理还有这些标签h1~h6,dt,他们都是文字类块级标签,里面不能放其他块级元素。
链接里面不能再放链接。
a里面可以放块级元素。
3、行内块元素(inline-block):可以对他们设置宽高和对齐属性。
特点:
和相邻行内元素(行内块)在一行上,但是之间会有空白缝隙。
默认宽度就是它本身内容的宽度。
高度,行高,外边距以及内边距都可以控制。
三、CSS字体样式属性
1、font-size:字号大小
用于设置字号,该属性的值可以使用相对长度单位,也可以使用绝对长度单位。其中,相对长度单位比较常用,推荐使用像素单位px,绝对长度单位使用较少。
2、font-family:字体
用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等。
例子:将网页中所有段落文本的字体设置为微软雅黑 p{ font-family:"微软雅黑";}
可以同时指定多个字体,中间用逗号隔开,表示如果浏览器不支持第一个字体,则会尝试下一个,直到找到合适的字体。
常用技巧:
现在网页中普遍使用14px+。
尽量使用偶数的数字字号。
各种字体之间必须使用英文状态下的逗号隔开。
中文字体需要加英文状态下的引号,英文字体一般不需要加引号。
当需要设置英文字体时,英文字体名必须位于中文字体名之前。
如果字体名中包含空格、#、$等符号,则该字体必须加英文状态下的单引号或双引号,例如font-family: "Times New Roman";。
尽量使用系统默认字体,保证在任何用户的浏览器中都能正确显示。
3、CSS Unicode字体
在 CSS 中设置字体名称,直接写中文是可以的。但是在文件编码(GB2312、UTF-8 等)不匹配时会产生乱码的错误。xp 系统不支持 类似微软雅黑的中文。
你可以使用英文来替代。 比如 font-family:"Microsoft Yahei"。
4、font-weight:字体粗细:文字加粗除了用b和strong标签之外,可以使用CSS来实现,但是CSS是没有语义的。
可用属性值:normal/bold/bolder/lighter/100~900(100的整数倍)。
小技巧:
css 数字 400 等价于 normal,而 700 等价于 bold。 但是我们更喜欢用数字来表示。
5、font-style:字体风格:文字倾斜除了用i和em标签之外,可以使用css来实现,但是css是没有语义的。
可用属性值:
normal(默认值)/italic 斜体/oblique 倾斜
小技巧:
平时我们很少给文字加斜体,反而喜欢给斜体标签(em,i)改为普通模式。
6、font:综合设置字体样式(重点)
基本语法格式:
选择器 {
font:font-style font-weight font-size/line-height font-family;
}
使用font属性时,必须按上面语法格式中的顺序书写,不能更换顺序,各个属性以空格隔开。
注意:
其中不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性,否则font属性将不起作用。
四、CSS外观属性
1、color:文本颜色
取值有以下三种:
预定义的颜色值,如red.pink等。
十六进制:如#FF0000等,实际工作中,十六进制是最常用的定义颜色的方式。
RGB代码:如红色可以表示为rgb(255,0,0)。
需要注意的是,如果使用RGB代码的百分比颜色值,取值为0时也不能省略百分比,必须写0%。
2、text-align:水平对齐方式用于设置文本内容的水平对齐,相当于html中的align对齐属性。
可用属性值如下:
left:左对齐(默认值)
right:右对齐
center:居中对齐(是让盒子里面的内容水平居中,而不是让盒子居中对齐)
3、text-indent:首行缩进
属性值可为不同单位的数值,em字符宽度的倍数或相对于浏览器窗口的百分比,允许使用负值,建议使用em作为设置单位。
1em就是一个字的宽度。
4、text-decoration 文本的装饰:通常用于给链接修改装饰效果
属性值:
none(默认)定义标准的文本。
underline:文本下的一条线。(下划线也是链接自带的)
overline:文本上的一条线
line-through:穿过文本的一条线
五、CSS背景(background)
css可以添加背景颜色,以及进行图片设置。
background-color | 背景颜色 |
background-image | 图片背景地址 |
background-repeat | 是否平铺 |
background-position | 背景位置 |
background-attachment | 背景固定还是滚动 |
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置 | 背景的合写 |
1、背景图片(image)
语法:
background-image: none||url(url)
参数:
none:无背景图(默认的)。
url: 使用绝对或相对地址指定背景图像。
2、背景平铺(repeat)
语法:
background-repeat: repeat|no-repeat|repeat-x|repeat-y
参数:
repeat:背景图像在纵向和横向上平铺(默认的)。
no-repeat:背景图像不平铺。
repeat-x:背景图像在横向上平铺。
repeat-y:背景图像在纵向上平铺。
3、背景位置(position)
语法:
background-position:length||length
background-position:position||position
参数:
length:百分数,参阅长度单位。
position:top|center|bottom|left|right
说明:
设置或检索对象的背景图像位置,必须先指定background-image属性。默认值为(0%,0%),如果只指定了一个值,该值将用于横坐标,纵坐标将默认为50%。第二个值将用于纵坐标。
注意:
position后面是x坐标和y坐标。可以使用方位名词或者精确单位。
如果和精确单位和方位名词混合使用,则必须是x坐标在前,y坐标在后面。
实际工作中用的最多的,就是北京图片居中对齐。
4、背景附着(background-attachment)
语法:
background-attachment:scroll|fixed
参数:
scroll:背景图像是随对象内容滚动
fixed:背景图像固定
说明:
设置或检索背景图像是随内容滚动还是固定的。
六、背景透明(CSS3)
background:rgba(0,0,0,.3);
最后一个参数是alpha透明度 取值在0~1;
注:背景半透明是指盒子背景半透明,盒子里面的内容不受影响。
七、CSS三大特性:层叠、继承、优先级
1、css层叠性:指多种css样式的叠加。
是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性层叠掉
比如先给某个标签指定了内部文字颜色为红色,接着又指定了颜色为蓝色,此时出现一个标签指定了相同样式不同值的情况,这就是样式冲突。 就近原则
一般情况下,如果出现样式冲突,则会按照CSS书写的顺序,以最后的样式为准。
样式冲突:遵循的原则是就近原则,哪个样式离结构近,就执行哪一个样式。
样式不冲突:不会层叠。
2、css继承性:书写css样式表时,子标签会继承父标签的某些样式,如文本颜色和字号。想要设置一个可继承的属性,只需将它应用于父元素即可。
注意:
恰当地使用继承可以简化代码,降低CSS样式的复杂性。子元素可以继承父元素的样式(text-,font-,line-这些元素开头的都可以继承,以及color属性)。
3、css优先级:定义css样式时,经常出现两个或者更多的规则应用在同一元素上,这时就会出现优先级的问题。
在考虑权重时,初学者还需要注意一些特殊的情况,具体如下:
`继承样式的权重为0:在嵌套结构中,不管父元素样式的权重多大,被子元素继承时,它的权重都为0,也就是说子元素定义的样式会覆盖继承来的样式。
行内样式优先:应用style属性的元素,其行内样式的权重非常高,可以理解为远大于100;
权重相同时,css遵循就近原则,也就是说靠近元素的样式有最大的优先级,或者说排在最后的样式优先级最大。
css定义了一个!important命令,该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近,!important都具有最大的优先级。
css特殊性(Specificity)
关于CSS权重,我们需要一套计算公式来去计算,这个就是 CSS Specificity,我们称为CSS 特性或称非凡性,它是一个衡量CSS值优先级的一个标准。
跟着黑马程序员学习自己整理的内容。