本文转自和参考：
1.suoning
2.红元老师
3.W3School
一、CSS简介
CSS是Cascading Style Sheets的简称，中文称为层叠样式表。属性和属性值用冒号隔开，以分号结尾。
CSS作用是给HTML文档增加样式，这就引出核心问题，如何定位某个HTML元素并绑定样式（选择器）？CSS又有哪些样式？如何使得绑定样式后的元素之间相处融洽，样式跟元素有什么关联性？
- HTML元素本身是没有任何样式的，之所以显示不一样都是浏览器给赋予的默认样式。
- 所有的HTML元素在CSS中默认都是一个“盒子模型”。
CSS的继承特性：
- 有给元素设置属性值，该元素使用自己属性，否则从父元素继承。
- 属性能否被继承是由属性本身特性决定的，具体可查找参考说明。
- 属性被继承的是计算值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Font Test</title>
<style>
.box1 {
color: red;
font-size: 60px;
}
.box2 {
font-size: 0.5em;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
<p>我是Font Test</p>
</div>
</div>
</body>
</html>
继承box1的color属性
继承计算后的值
CSS的层叠特性：
- CSS允许多个名字相同的属性层叠在同一个元素。
- 属性的层叠，以来选择器的权重。
- !important >内联样式>id选择器>类选择器>元素选择器=属性选择器=伪类选择器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Font Test</title>
<style>
.box1 {
color: red;
font-size: 60px;
}
.box2 {
background-color: blueviolet;
}
.box3 {
width: 300px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box1 box2 box3">
<p>我是Font Test</p>
</div>
</div>
</body>
</html>
HTML引入CSS的方式：
- 行内样式
<div style="..."></div>
- 嵌入样式
<head>
<style type="text/css">
.p{
font-color:red;
}
</style>
</head>
3.外部引用
第一种方式：
<head>
<style type="text/css">
@import "My.css"; 此处注意.css文件的路径
</style>
</head>
第二种方式：
<head>
<link href="My.css" rel="stylesheet" type="text/css">
</head
实例.png
二、CSS选择器
基本选择器：
1.通用元素选择器
* 表示应用到所有的标签。
* {color: yellow}
2.标签选择器
匹配所有使用 div 标签的元素（可以匹配所有标签）
div {color: yellow}
3.类选择器
匹配所有class属性中包含info的元素。
语法：.类名{样式}（类名不能以数字开头，类名要区分大小写。）
.Mycolor {color: yellow}
<h3 class="Mycolor">nick</h3>
4.ID选择器
使用id属性来调用样式，在一个网页中id的值都是唯一的（是W3C规范而不是规则，所以不会报错）。
语法：#ID名{样式}（ID名不能以数字开头）
#Mycolor {color: yellow}
<h3 id="Mycolor">Nick.</h3>
组合选择器：
1.多元素选择器
同时匹配h3,h4标签，之间用逗号分隔。
h3,h4 {color: yellow;}
<h3>Nick</h3>
<h4>Jenny</h4>
2.后代元素选择器
匹配所有div标签里嵌套的P标签，之间用''分隔。
div p {color: yellow;}
<div>
<p>Nick</p>
<div>
<p>Nick</p>
</div>
</div>
3.子元素选择器
匹配所有div标签里嵌套的子P标签，之间用>分隔;不包含间接子元素。
div > p {color: yellow;}
<div>
<p>Nick</p>
<p>Nick</p>
</div>
/**下面也是可以的：**/
.div-c > div-cp {color: red;}
<div class="div-c">
<p>Nick</p>
<p class="div-cp">Nick</p>
<span class="div-cp">Nick</span >
</div>
4.毗邻元素选择器
匹配紧随div标签之后的同级标签P，之间用+分隔（只能匹配一个）。
div + p {color: yellow;}
<div>Nick</div>
<p>Nick</p>
匹配所有紧随div标签之后的同级标签P，之间用~分隔（匹配多个）。
div ~ p {color: yellow;}
<div>Nick</div>
<p>Nick</p>
5.交集选择器：同时满足两个选择器
div.one[title="test"]{color: yellow;}
<div class="one" title="test"> 1</div>
<div class="two">2 </div>
<p class="one">3</p>
6.并集选择器：只要符合其中一个的都被选中。
div,.one,[title="test"]{color: yellow;}
<div class="one" title="test"> 1</div>
<div class="two">2 </div>
<p class="one">3</p>
h1,h1,h3,h4,h5,h6 {color: yellow;}
<h1>1</h1>
<h2>2</h2>
属性选择器：
1.[title] & P[title]
设置所有具有title属性的标签元素；设置所有具有title属性的P标签元素。
[title]
{
color: yellow;
}
p[title]
{
color: yellow;
}
<div title>Nick</div>
<p title>Nick</p>
2.[title=Nick]
设置所有title属性等于“Nick”的标签元素。
[title="Nick"]
{
color: yellow;
}
<p title="Nick">Nick</p>
3.[title~=Nick]
设置所有title属性具有多个空格分隔的值、其中一个值等于“Nick”的标签元素。
[title~="Nick"]
{
color: yellow;
}
<p title="Nick Jenny">Nick</p>
<p title="Jenny Nick">Nick</p>
4.[title|=Nick]
设置所有title属性具有多个连字号分隔（hyphen-separated）的值、其中一个值以"Nick"开头的标签元素。例：lang属性："en"、"en-us"、"en-gb"等等
[title|="Nick"]
{
color: yellow;
}
<p title="Nick-Jenny">Nick</p>
5.[title^=Nick]
设置属性值以指定值开头的每个标签元素。
[title^="Nick"]
{
color: yellow;
}
<p title="NickJenny">Nick</p>
6.[title$=Nick]
设置属性值以指定值结尾的每个标签元素。
[title$="Nick"]
{
color: yellow;
}
<p title="JennyNick">Nick</p>
7.[title*=Nick]
设置属性值中包含指定值的每个元素
[title*="Nick"]
{
color: yellow;
}
<p title="SNickJenny">Nick</p>
伪类选择器：
- 动态伪类：
:link、:hover、:active、:visited。hover必须放在link和visited之后才能生效hover和active可以用在其他标签上。
-
a:link（未访问的链接状态）,用于定义了常规的链接状态。 -
a:hover（鼠标放在链接上的状态）,用于产生视觉效果。 -
a:active在链接上按下鼠标时的状态）。 -
a:visited（已访问过的链接状态）,可以看出已经访问过的链接。
a:link{color: black}
a:visited{color: red
a:hover{color: yellow}
a:active{color: blue}
<a href="#">Nick</a>
strong:hover{color: yellow}
strong:active{color: blue}
<strong>Nick</strong>
- 动态伪类
:focus：获取焦点之后。tabindex属性可是使<a>去掉focus样式。
a,input :focus{color: yellow}
<input type="text">
<a href="#">Nick</a>
<a href="#" tabindex="-1">Nick</a>
- 结构伪类：
nth-child(n):选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。偶数evne；奇数：odd；n的取值是自然数。
p:nth-child(2n){color:red}
p:nth-child(even){color:red}
p:nth-child(-n+3){color:red}
<body>
<div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<div>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<div>
<div>
<strong>1</strong>
<strong>2</strong>
<div>
<body>
4.结构伪类：nth-of-type(n):选择器匹配同类型中的第n个同级兄弟元素。
p:nth-of-type(3){color:red}
<body>
<div>
<span>0</span>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<div>
<body>
5.其他伪类选择器：before、after
P:before 在每个<p>元素的内容之前插入内容;
P:after 在每个<p>元素的内容之后插入内容。
p {
color: yellow;
}
p:before{
content: "before...";
}
p:after{
content: "after...";
}
<p> Nick </p>
三、常用属性：
-
字体属性：
font-style: 用于规定斜体文本。
font-weight: 设置文本的粗细。
font-size: 设置字体的大小。
font-family：字体名称。
font：简写属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Font Test</title>
<style>
div {
background-color: gold;
/*
font-size: 30px;
font-family: 新宋体;
font-weight: bold;
font-style: italic;
line-height: 50px;
font-variant: small-caps;
*/
/*属性简写方式1：style variant weight size/line-height family */
font: bold italic small-caps 30px/50px 新宋体;
/*属性简写方式2:style variant weight 省略*/
/*font: 30px/50px 新宋体;*/
/*属性简写方式3：line-height 省略*/
/*font: 30px 新宋体;*/
/*属性错误方式 字体要在最后 */
/*font: 新宋体 30px;*/
}
</style>
</head>
<body>
<div>
我是Font Test
</div>
</body>
</html>
效果展示
2.文本属性
white-space: 设置元素中空白的处理方式。
direction: 规定文本的方向 。
text-align: 文本的水平对齐方式 。
line-height: 文本行高。
vertical-align: 文本所在行高的垂直对齐方式。
text-indent: 文本缩进。
letter-spacing: 添加字母之间的空白。
word-spacing: 添加每个单词之间的空白。
text-transform: 属性控制文本的大小写。
text-overflow: 文本溢出样式。
text-decoration: 文本的装饰。
text-shadow：文本阴影。
word-wrap：自动换行。
3.定位属性
bottom:设置定位元素下外边距边界与其包含块下边界之间的偏移。
把图像的底边缘设置在其包含元素底边缘之上 5 像素高的位置：
img
{
position:absolute;
bottom:5px;
}
clear:规定元素的哪一侧不允许其他浮动元素。
图像的左侧和右侧均不允许出现浮动元素：
img
{
float:left;
clear:both;
}
clip:剪裁绝对定位元素。
剪裁图像：
img
{
position:absolute;
clip:rect(0px,60px,200px,0px);
}
cursor:规定要显示的光标的类型（形状）。
一些不同的光标：
span.crosshair {cursor:crosshair;}
span.help {cursor:help;}
span.wait {cursor:wait;}
display规定元素应该生成的框的类型，正常值有：inline、inline-block、block；但是，但是，但是:list-item专门为li元素设置。其中inline-block比较特殊，可以是元素同时具备行内和块级元素的属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>li Test</title>
</head>
<body>
<ol>
<li>NO1</li>
<li>NO2</li>
<li>NO3</li>
<li>NO4</li>
<li>NO5</li>
</ol>
</div>
</body>
</html>
li自带的display属性
块级元素之所以是块级元素就是因为，浏览器默认给元素增加了display:block属性。
float:规定框是否应该浮动。
把图像向右浮动：
img
{
float:right;
}
left:设置定位元素左外边距边界与其包含块左边界之间的偏移。
把图像的左边缘设置在其包含元素左边缘向右 100 像素的位置：
img
{
position:absolute;
left:100px;
}
overflow:规定当内容溢出元素框时发生的事情。
div
{
width:150px;
height:150px;
overflow:scroll;
}
position: 规定元素的定位类型。
定位 h2 元素：
h2
{
position:absolute;
left:100px;
top:150px;
}
right:设置定位元素右外边距边界与其包含块右边界之间的偏移。
把图像的右边缘设置在其包含元素右边缘向左 5 像素的位置：
img
{
position:absolute;
right:5px;
}
top:设置定位元素的上外边距边界与其包含块上边界之间的偏移。
把图像的上边缘设置在其包含元素上边缘之下 5 像素高的位置：
img
{
position:absolute;
top:5px;
}
vertical-align:设置元素的垂直对齐方式。
垂直对齐一幅图像：
img
{
vertical-align:text-top;
}
visibility:规定元素是否可见。
使 h2 元素不可见：
h2
{
visibility:hidden;
}
z-index:设置元素的堆叠顺序。
设置图像的 z-index:
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
4.背景属性
background:在一个声明中设置所有的背景属性。
background-attachment:设置背景图像是否固定或者随着页面的其余部分滚动。
background-color:设置元素的背景颜色。
background-image:设置元素的背景图像。
background-position:设置背景图像的开始位置。
background-repeat:设置是否及如何重复背景图像。
background-clip:规定背景的绘制区域。
background-origin规定背景图片的定位区域。
background-size:规定背景图片的尺寸。
5.边框属性
border:在一个声明中设置所有的边框属性。
border-bottom-style:设置下边框的样式。
border-color:设置四条边框的颜色。
border-left:在一个声明中设置所有的左边框属性。
border-style:设置四条边框的样式。
outline:在一个声明中设置所有的轮廓属性。
box-shadow:向方框添加一个或多个阴影。
6.box属性
overflow-x:如果内容溢出了元素内容区域，是否对内容的左/右边缘进行裁剪。
overflow-style:规定溢出元素的首选滚动方法。
rotation:围绕由 rotation-point 属性定义的点对元素进行旋转。
rotation-point:定义距离上左边框边缘的偏移点。
7.color属性
color-profile:允许使用源的颜色配置文件的默认以外的规范。
opacity:规定元素的不透明级别。
rendering-intent:允许使用颜色配置文件渲染意图的默认以外的规范。
8.CSS尺寸属性
height:设置元素高度,默认auto。对于非替换的行内元素无效！
width:设置元素的宽度。对于非替换的行内元素无效！
max-width:设置元素的最大宽度。
9.可伸缩框属性
box-ordinal-group:规定框的子元素的显示次序。box-orient:规定框的子元素是否应水平或垂直排列。box-align:规定如何对齐框的子元素。10.外边距属性
margin:在一个声明中设置所有外边距属性。margin-top:设置元素的上外边距。
11.内边距属性
padding:在一个声明中设置所有内边距属性。
padding-top:设置元素的上内边距。
12.列表属性
下面的这些属性是设置在ol、ul上的，会被继承在li上。
list-style-type:设置列表项标记的类型；none属性值使用的最多。
list-style-position:设置列表项标记的放置位置。
list-style-image:将图象设置为列表项标记。
list-style:在一个声明中设置所有的列表属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>li Test</title>
<style>
ul{
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li{
margin-top: 8px;
}
ul li span{
background-color: gold;
color: aliceblue;
padding: 0px 5px;
/*修改字体大小，作用在span上无效*/
/*width: 300px;*/
/*height: 300px;*/
}
</style>
</head>
<body>
<ul>
<li><span>1</span>NO1</li>
<li><span>2</span>NO2</li>
<li><span>3</span>NO3</li>
<li><span>4</span>NO4</li>
<li><span>5</span>NO5</li>
</ul>
</div>
</body>
</html>
通过调节内外边距实现span分离效果
13.表格属性
border-collapse:规定是否合并表格边框。border-spacing:规定相邻单元格边框之间的距离。caption-side:规定表格标题的位置。empty-cells:规定是否显示表格中的空单元格上的边框和背景。table-layout:设置用于表格的布局算法。
Table实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table Test</title>
<style>
table{
border: 1px solid red;
/*合并单元格的边框*/
border-collapse: collapse;
/*table居中*/
margin: 100px auto;
}
caption{
color: gold;
font-size: 20px;
font-weight: bold;
margin-bottom: 20px;
}
th,td{
border: 1px solid red;
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<table>
<caption>我是谁</caption>
<thead>
<tr>
<th>thead</th>
<th>thead</th>
<th>thead</th>
<th>thead</th>
<th>thead</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">tbody</td>
<td>tbody</td>
<td>tbody</td>
<td rowspan="2">tbody</td>
</tr>
<tr>
<td>tbody</td>
<td>tbody</td>
<td>tbody</td>
<td>tbody</td>
</tr>
<tr>
<td>tbody</td>
<td>tbody</td>
<td>tbody</td>
<td>tbody</td>
<td>tbody</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>tfoot</td>
<td>tfoot</td>
<td>tfoot</td>
<td>tfoot</td>
<td>tfoot</td>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
四、补充内容：
-
选择器大全
-
伪类:两个点“
:” -
行高(
line-height)：两行文字基线之间的距离。
-
行内元素不要嵌套块元素。
-
CSS对元素的分类
网友评论