概念

  • CSS 指层叠样式表 (Cascading Style Sheets)
  • 如果把html比作人身体的各个部分，那么CSS就是人身上穿的衣服，耳朵上带的耳环，手腕上戴的手表，指甲上染的指甲油，它是用来装饰html标签的

如何在 html 标签中设置 CSS 样式

  • 外部样式表(External style sheet)，写在单独的CSS文件中，当样式需要应用于很多页面时，使用外部样式表

    1
    2
    3
    <head>
    	<link rel="stylesheet" type="text/css" href="mystyle.css">
    </head>

  • 内部样式表(Internal style sheet)，在html文件的style标签中，当单个文档需要特殊的样式时，使用内部样式表

    1
    2
    3
    4
    5
    6
    7
    <head>
    	<style>
    		hr {color:sienna;}
    		p {margin-left:20px;}
    		body {background-image:url("images/back40.gif");}
    	</style>
    </head>

  • 内联样式(Inline style)，直接通过标签的style属性，样式仅需要在一个元素上应用一次时，使用内联样式

    1
    <p style="color:sienna;margin-left:20px">这是一个段落。</p>

  • 当用多种方式定义样式时，应用样式的优先级是：

    内联样式 > 内部样式 > 外部样式 > 浏览器默认样式

    内联样式 > id选择器 > class选择器 > 内部选择器 > 外部样式 > 浏览器默认样式

    上面的规则适用于没有!important 规则的情况。

选择器语法

注释

1
2
3
4
5
6
7
/*这是个注释*/
p{
	text-align:center;
	/*这是另一个注释*/
	color:black;
	font-family:arial;
}

选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
/*id选择器，所有id属性是para1的标签被应用样式*/
#para1{text-align:center;color:red;}
/*class选择器，所有class属性是center的标签被应用样式*/
.center {text-align:center;}
/*所有类名是center的p标签被应用样式*/
p.center {text-align:center;}
/*标签选择器，所有p标签被应用样式*/
p{text-align:center;}
/*包含选择器1，div内的所有p标签被应用样式，不受层级影响*/
div p{color:yellow;}
/*包含选择器2，类名为first标签下的所有span标签被应用样式*/
.first span{color:red;}
/*子选择器1，div标签的儿子p标签被应用样式，更深一层不行*/
div>p{color:red;}
/*子选择器2，类名为first标签下的子span标签被应用样式，更深一层不行*/
.first>span{color:red;}
/*兄弟选择器，与div同级的所有p标签被应用样式*/
div~p{color:red;}
/*紧邻选择器，每个div后面的p被选中*/
div+p{color:red;}
/*通用选择器，匹配html中的所有元素标签*/
*{color:red;}
/*分组选择器*/
h1,h2,p{color:green;}
/*属性选择器，属性值中包含独立的单词*/
[title~=flower]  -->  <img src="/i/eg_tulip.jpg" title="tulip flower" />
/*属性选择器，属性值中只要能拆出来value这个词就行*/
[title*=flower]   -->  <img src="/i/eg_tulip.jpg" title="ffffflowerrrrrr" />
/*属性选择器，属性值中必须是完整且唯一的单词，或者以 - 分隔开*/
[lang|=en]     -->  <p lang="en">  <p lang="en-us">
/*属性选择器，属性值的前几个字母是value就可以*/
[lang^=en]    -->  <p lang="ennn">
/*属性选择器，属性值的后几个字母是 value 就可以*/
a[src$=".pdf"]

伪类/伪元素

CSS中颜色值表示

  • 十六进制：”#ff0000”
  • RGB：”rgb(255,0,0)”
  • 颜色名称：”red”

Serif和Sans-serif字体区别

盒子模型(Box Model)

@media媒体类型

  • 为不同的设备设置不同的样式，一般用来响应式布局
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    /*语法规则*/
    @media mediatype and|not|only (media feature) {
        CSS-Code;
    }
    /*当页面小于960px的时候执行它下面的CSS
    screen的意思是在告知设备在打印页面时使用衬线字体，在屏幕上显示时用无衬线字体。但是目前很多网站都会直接省略screen,因为一般网站可能不需要考虑用户去打印的情况
    */
    @media screen and (max-width: 960px){
        body{
            background: #000;
        }
    }
    /*混合使用大于与等于，意思是当页面宽度大于960px小于1200px的时候执行下面的CSS*/
    @media screen and (min-width:960px) and (max-width:1200px){
        body{
            background:yellow;
        }
    }
    /*竖屏*/
    @media screen and (orientation: portrait) and (max-width: 720px) { 对应样式 }
    /*横屏*/
    @media screen and (orientation: landscape) { 对应样式 }
  • 用min-width时，小的放上面大的在下面
    1
    2
    3
    @media (min-width: 1200px){ //>=1200的设备 }
    @media (min-width: 992px){ //>=992的设备 }
    @media (min-width: 768px){ //>=768的设备 }
  • 用max-width时，大的放上面小的在下面
    1
    2
    3
    @media (max-width: 1199px){ //<=1199的设备 }
    @media (max-width: 991px){ //<=991的设备 }
    @media (max-width: 767px){ //<=768的设备 }