0x01 CSS基础语法及嵌入方式
1. CSS基础语法
格式： 选择器(选择符){属性:属性值;属性:属性值;……}
注释样式：
/*注释内容*/2. 嵌入方式
2.1 内联方式(行内样式)
就是在双标签的开始标签中嵌入
特点：仅作用于本标签
2.2 内部方式
即在head标签中嵌入style标签及其样式
特点：作用于整个页面
2.3 外部导入(推荐)
就是在head标签中用link链接外部的CSS文件，进行修饰(这种采取HTML和CSS代码分离的技术，十分常用)
特点：作用于整个网站
嵌入方式--使用实例
<!DOCTYPE html>
<html>
<head>
<title>CSS的嵌入方式</title>
<meta charset="utf-8">
<style type="text/css">
li{
background-color:red;
font-size:20px;
}
</style>
<!-- 这里需要在当前目录下新建一个名为my.css的文件，里面的代码为
ul{
background-color:#f0c;
}
-->
<link rel="stylesheet" type="text/css" href="my.css">
</head>
<body>
<h3>CSS的嵌入方式</h3>
<ul>
<li style="background-color:cyan;">你只有足够自律</li>
<li style="color:#f0c;">才能非常自由</li>
<li>思维孕育行动</li>
<li>行动培养习惯</li>
<li>习惯决定命运</li>
</ul>
</body>
</html>注意：当样式冲突时，三种嵌入方式的选择是采取就近原则，即离要修饰的值越近的CSS属性生效；当样式不冲突时，三种嵌入方式的修饰则会叠加使用。
0x02 CSS选择符和选择器
1. CSS2选择符(常用)
1.1 HTMl选择符、标签选择器(E)
就是直接用HTML标签作为选择符进行修饰
格式：
p{……} 网页中所有p标签都使用此样式1.2 class类选择符(E.myclass)
就是在HTML的开始标签中进行class命名，同一网页中，可以命名多个相同的class名称
格式：
.class名{color:red;……} 同一网页中，所有**相同的class名**都使用此样式
p.class名{color:cyan;……} 同一网页中，所有**p标签下的相同class名**都使用此样式1.3 Id选择符(E#myid)
就是在HTML的开始标签中进行ID命名，同一网页中，ID命名具有唯一性
格式：
#ID名{color:#f0c;……} 网页中，ID名为”ID名“的使用此样式1.4 关联选择符、包含选择符(E F)
就是对标签下包含的一个标签#进行定义
格式：
ul li{color:#2bf666;……} 网页中，所有ul标签下的li标签都使用此样式1.5 组合选择符
就是多个HTML标签同时使用这一个样式
格式：
body,p,h1,div,sapn,ul,ol,li{margin:0;padding:0;} 网页中的body,p,h1,div,span,ul,ol,li标签都使用此样式1.6 伪类选择符
格式：
a:link{color:green;……} 未访问的链接样式
a:visited{color:red;……} 已访问的链接样式
a:hover{color:skyblue;……} 鼠标移入时的链接样式
a:active{color:blue;……} 鼠标点击链接时的样式选择符--使用实例
<!DOCTYPE html>
<html>
<head>
<title>CSS2选择符</title>
<meta charset="utf-8">
<style type="text/css">
/*HTML标签选择符*/
p{
background-color:red;
}
/*class类名选择符*/
.two{
color:cyan;
}
/*ID名选择符*/
#id{
color:#f0c;
}
/*包含选择符*/
ul li{
font-size:20px;
font-family:宋体 ;
}
/*组合选择符*/
ul,li,p,a{
margin:10px;
padding:5px;
}
/*a{
text-decoration:none;
}*/
/*伪类选择符*/
a:link{
color:blue;
}
a:visited{
color:red;
}
a:hover{
color:cyan;
}
a:active{
color:#f0c;
}
</style>
</head>
<body>
<h3>CSS2选择符</h3>
<ul>
<li id="one">列表一</li>
<li class="two">列表二</li>
<li>列表三</li>
<li>列表四</li>
</ul>
<p>你只有足够自律，才能非常自由</p>
<a href="http://www.baidu.com/" target="_blank">百度一下</a>
</body>
</html>2. CSS3选择器(了解)
2.1 关系选择器
a. 子选择器(E>F)
div>p 即div标签下的所有标签都使用此样式
b. 相邻选择器(E+F)
div+p 选择div标签后紧邻的第一个p标签采用此样式
c. 兄弟选择器(E~F)
div~p 选择div标签后的所有兄弟p标签采用此样式
2.2 状态伪类选择器
a. E:hover 设置鼠标移入时的样式
b. E:focus 设置元素在获取到焦点时的样式
c. E:first-child 设置父元素的第一个子元素的样式
d. E:last-child 设置符元素的最后一个子元素的样式
e. E:checked 设置元素被用户选中时的样式(只用于input中的单选框和复选框)
选择器--使用实例
<!DOCTYPE html>
<html>
<head>
<title>CSS3选择器</title>
<meta charset="utf-8">
<style type="text/css">
/*设置ul标签下的所有li标签的样式*/
ul>li{
color:#2bf666;
}
/*设置ul标签相邻的第一个li标签的样式*/
ul+li{
background-color:#ccc;
}
/*设置ul标签并列的所有的兄弟p标签都使用此样式*/
ul~p{
color:#f0c;
}
p.hover:hover{
color:skyblue;
}
input:focus{
background:red;
border:2px dashed cyan;
}
input:checked+span{
color:red;
}
/*设置用户选中元素时添加的内容*/
input:checked+span:after{
content:"我被选中了";
}
</style>
</head>
<body>
<h3>CSS3选择器</h3>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
<li>列表大大</li>
<li>列表小小</li>
<p>你只有足够自律，才能非常自由</p>
<p class="hover">习惯决定命运</p>
<ol>
<li>思维</li>
<li>行动</li>
<li>习惯</li>
</ol>
用户名:<input type="text" name="username">
<br />
性别:
<laabel>
<input type="radio" name="sex" value="0"><span>男 </span>
</label>
<label>
<input type="radio" name="sex" value="1"><span>女 </span>
</label>
</body>
</html>0x03 CSS中常用属性
1. 颜色(Color)
a. 颜色名
red,yellow,green,blue,pink,skyblue,grey,black,white
*b. HEX
HEX为十六进制的正整数 格式为#RRGGBB或#RGB
*c. RGB
格式：
a{color:rgb(R,G,B);} RGB中的每个元素的取值为0~255
d. RGBA
RGBA比RGB多了一个设置透明度(A)的，取值为百分比或小数
*e. 图片透明度设置opacity
img{opacity:0.35;}
2. 字体(Font)
| 属性 | 取值 | 作用 |
|---|---|---|
| *font-size | 像素或百分比(不允许为负值) | 设置字体大小 |
| *font-family | 宋体、Arial | 设置字体 |
| font-style | italic(斜体) | 设置字体样式 |
| *font-weight | bold(加粗) 或用数字(100~900) | 设置字体的粗细 |
| font-variant | small-caps | 设置文本为小型的大写字母 |
3. 文本(Text)
| 属性 | 取值 | 作用 |
|---|---|---|
| text-indent | 像素值|em(字符) | 设置文本的缩进 |
| text-overflow | clip|ellipsis(以...显示多余内容) | 设置是否以...显示文本的多余内容 |
| *text-align | left|center|right | 设置文本的水平对齐方式 |
| text-transform | capitalize|uppercase|lowercase | 设置文本字母的大小写 |
| *text-decoration | none|underline|line-through | 设置文本的划线 |
| *text-shadow | length1 length2 [length3]&&color | 设置文本的阴影及模糊效果 |
| vertical-align | top|middle|bottom | 设置文本的垂直对齐方式 |
| direction | ltr(默认) | rtl(文本由右转向左) | 设置文本流的方向 |
| *white-space | nowrap | 强制在同一行内显示所有文本(overflow) |
| *letter-spacing | 像素值 | 设置文本或字母的间距 |
| word-spacing | 像素值 | 设置单词的间距 |
| *line-height | 长度|百分比|小数 | 设置文本的行高 |
| *color | 与color属性取值一致 | 设置文本的颜色 |
颜色、字体、文本属性--使用实例
<!DOCTYPE html>
<html>
<head>
<title>CSS中常用属性一</title>
<meta charset="utf-8">
<style type="text/css">
ul{
width:200px;
}
ul li:first-child{
color:red;
background-color:#eee;
}
li.one{
text-transform:uppercase;
}
li.two{
color:rgb(102,233,200);
}
li.three{
color:rgba(20,101,222,0.5);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
img{
width:300px;
opacity:0.4;
}
ul>li:last-child{
font-size:30px;
font-family:Arial;
font-style:italic;
/*font-weight:700;*/
font-weight:bold;
/*设置文本为小型的大写字母*/
font-variant:small-caps;
/*text-transform:uppercase;*/
color:#f0c;
background-color:#eee;
}
p.one{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
p.two{
text-decoration:underline;
direction:rtl;
/*严格按照我设置的顺序进行排列*/
unicode-bidi:bidi-override;
text-align:left;
}
p.three{
text-decoration:line-through;
letter-spacing:3px;
word-spacing:5px;
}
p.four{
font-size:20px;
text-indent:2em;
text-shadow:3px 3px 3px #666;
}
p>a{
font-size:10px;
text-decoration:none;
/*vertical-align:-10px;*/
vertical-align:bottom;
}
ol>li{
line-height:1.5;
color:#1ea;
}
</style>
</head>
<body>
<h3>CSS颜色、字体、文本属性</h3>
<ul>
<li>思维孕育行动</li>
<li class="one">行为习惯 pretty good</li>
<li class="two">行动培养习惯</li>
<li class="three">习惯决定命运 你只有足够自律，才能非常自由</li>
<li>very good</li>
</ul>
<!-- 在当前目录下要有一张名为1.jpg的图片 -->
<img src="1.jpg">
<p class="one">你只有足够自律，才能非常自由 你只有足够自律，才能非常自由</p>
<p class="two">你只有足够自律，才能非常自由</p>
<p class="three">你只有足够自律，才能非常自由 you are pretty!</p>
<p class="four">你只有足够自律，<a href="#">才能非常自由</a></p>
<ol>
<li>你只有足够自律</li>
<li>才能非常自由</li>
</ol>
</body>
</html>注意：
- 使用text-overflow前，需要文本内容强制在同一行显示(white-space)，并且将多余内容隐藏(over-flow:hidden;)
- text-shadow中的三个值，第一个值控制水平方向，第二个值控制垂直方向，第三个值控制阴影效果。其中，第一、二两个值可以为负数，第三个值为可选项。
- vertical-align设置文本垂直对齐方式时，需要将要修饰的文本大小设置比父文本小；否则，则需要借助设置像素值的方式让文本进行上移动。
- direction设置文本流由右向左转(rtl)时，需要借助unicode-bidi:bidi-override; 去强制按照我设置的规则进行排列顺序。
4. 边框(Border)
| 属性 | 取值 | 作用 |
|---|---|---|
| *border | 宽度||样式||颜色 | 综合设置边框的属性 |
| border-color | color属性 | 设置边框的颜色 |
| border-style | dashed|solid|dotted|double 3D样式:groove|ridge|inset|outset |
设置边框的样式 |
| border-width | 像素值 | 设置边框的宽度 |
| *border-radius | 像素值 | 设置对象使用圆角边框 |
| *box-shadow | length1||length2||[length3]||[length4] | 设置对象的阴影效果 |
5. 背景(Background)
| 属性 | 取值 | 作用 |
|---|---|---|
| background | 颜色||url||repeat||attachmetn||position | 设置背景的属性 |
| background-color | color属性 | 设置背景的颜色 |
| background-image | url | 添加背景图片 |
| background-repeat | repeat-x|repeat-y|repeat|no-repeat | 设置背景图片如何平铺 |
| background-position | 像素值|left|right|top|bottom | 设置背景图片的位置 |
| background-attachment | fixed(背景图像固定)|scroll(默认值) | 设置背景图片是否固定 |
| background-size | 像素值 | 设置背景图片的尺寸大小 |
6. 内补白(Padding)
| 属性 | 取值 | 作用 |
|---|---|---|
| *padding | length1||length2||length3||length4 | 设置对象的四边内部边距 |
| padding-top | 像素值 | 设置对象的顶边内部边距 |
| padding-right | 像素值 | 设置对象的右边内部边距 |
| padding-bottom | 像素值 | 设置对象的底边内部边距 |
| padding-left | 像素值 | 设置对象的左边内部边距 |
7. 外补白(Margin)
| 属性 | 取值 | 作用 |
|---|---|---|
| *margin | length1||length2||length3||length4 | 设置对象的四边外部边距 |
| margin-top | 像素值 | 设置对象的顶边外部边距 |
| margin-right | 像素值 | 设置对象的右边外部边距 |
| margin-bottom | 像素值 | 设置对象的底边外部边距 |
| margin-left | 像素值 | 设置对象的左边外部边距 |
8. 定位(Position)
| 属性 | 取值 | 作用 |
|---|---|---|
| *position | static|relative|absolute|fixed | 检索对象的定位方式 |
| *z-index | auto|整数值 | |
| *top | 像素值 | |
| right | 像素值 | |
| bottom | 像素值 | |
| *left | 像素值 |
9. 布局(Layout)
| 属性 | 取值 | 作用 |
|---|---|---|
| *display | none|block(块)|table(表格)|…… | 设置对象显示的类型 |
| *float | none|left|right | 设置对象如何浮动 |
| *clear | none|left|right|both(不允许有浮动) | 清楚对象的浮动效果 |
| visibility | visible|hidden|collapse | 设置对象是否显示 |
| clip | rect(1||2||3|| 4) | |
| *overflow | visible(不剪切内容)|hidden | 设置其指定内容超过宽度及高度如何显示 |
| overflow-x | visible(不剪切内容)|hidden | 设置其指定内容超过宽度如何显示 |
| overflow-y | visible(不剪切内容)|hidden | 设置其指定内容超过高度如何显示 |
行标签和块标签
| 行标签 | 块标签 |
|---|---|
| a | h1 |
| b | div |
| em | p |
| strong | pre |
| i | li |
| span |
10. 用户界面(User Interface)
| 属性 | 取值 | 作用 |
|---|---|---|
| cursor | ne-resize|nw-resize | 设置对象上的移动的鼠标光标样式 |
| zoom | normal|数值|百分比 | 设置对象的缩放比例 |
| …… |
边框、背景、内外补白、定位、布局、用户界面--使用实例
<!DOCTYPE html>
<html>
<head>
<title>CSS中常用属性二</title>
<meta charset="utf-8">
<style type="text/css">
body{
background-image:url("9.jpg");
background-size:1000px;
/*background-repeat:no-repeat;*/
background-repeat:no-repeat;
background-attachment:fixed;
}
ul li{
margin:0px;
padding:0px;
}
ul,ol{
list-style:none;
}
ul>li{
width:200px;
height:200px;
border:1px solid red;
float:left;
margin:0px 10px;
}
ul li:last-child{
/*border-color:cyan;*/
border-top-color:#2bf666;
border-right-color:#f0c;
border-bottom-color:#71d;
border-left-color:#1fb;
}
ul li.two{
border-style:dashed;
border-bottom-style:solid;
border-width:2px;
border-bottom-width:3px;
}
ul li.three{
border-radius:30px 10px;
/*border-top-left-radius:10px;*/
box-shadow:2px 2px 8px 3px red;
}
div.div{
clear:both;
}
ol li:first-child{
width:200px;
background:url("map") repeat-x;
background-position:bottom;
margin:0px 10px;
/*background-image:url("2.jpg");*/
}
/*
倒影效果没有做出来
h3{
box-reflect:below 10px;
}*/
div.one{
width:300px;
height:500px;
background-color:#eee;
/*position:absolute;*/
}
/*absolute基于浏览器的位置*/
div.two{
width:200px;
height:200px;
background-color:cyan;
position:absolute;
top:120px;
}
div.three{
width:200px;
height:200px;
position:relative;
margin:30px;
background-color:#f0c;
}
div.four{
width:2000px;
height:200px;
background-color:#aaa;
position:fixed;
float:right;
right:-1800px;
}
div.four:hover{
left:0px;
}
span{
width:100px;
height:100px;
background-color:#333;
display:block;
cursor:nw-resize;
zoom:2;
}
</style>
</head>
<body>
<h3>边框、背景、内外补白、定位、布局、用户界面</h3>
<ul>
<li></li>
<li class="two"></li>
<li class="three"></li>
<li></li>
</ul>
<div class="div"></div>
<ol>
<li>1</li>
</ol>
<span>very good</span>
<div class="one">
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
</div>
</body>
</html>注意：
- border,background,margin,padding 在取值时，四个像素值分别代表为上、右、下、左(顺时针)。
- 文本倒影效果没有实现出来