本文详细介绍了CSS的基本概念、注释方式及各种属性的应用，包括颜色设置、文本格式化、边距和填充的设置方法等。此外还讲解了不同选择器的作用范围和优先级，以及CSS3新增的选择器功能。
转载请标明出处：http://blog.youkuaiyun.com/wu_wxc/article/details/50927867
本文出自【吴孝城的优快云博客】
CSS全称：层叠样式表（Cascading Style Sheets），就是一种用来改变内容外观的表现，例如文字的大小、颜色，或是一些背景图片，边框等等
在CSS中，
注释用
/*这里是要注释的语句*/使用样式可以编写一次代码，多个地方使用
样式由“选择符”和“声明”组成，
声明由属性和值组成
选择符又称选择器，可以自己取名字
声明是在“{}”中的，属性和值之间用“:”分隔，有多条声明时，用“;”
如：
p{
font-size:10px;
color: red;
font-family: "微软雅黑";
font-weight: bold;
font-style: italic;
text-decoration: underline;
text-decoration: line-through;
text-indent: 2em;
line-height: 20px;
letter-spacing: 20px;
word-spacing: 20px;
text-align: center;
}px为像素
颜色由RGB，也就是R(red)、G(green)、B(blue)三原色组成
每一项取值0~255，也就是0%~100%
如：
h1{
color: rgb(10%,20%,50%);
}如：
h1{
color: #00ff55;
}font-style: italic; 斜体
text-decoration: underline; 下划线
text-decoration: line-through; 删除线
text-indent: 2em; 缩进
line-height: 20px; 行间距(行高)，不许使用负值
letter-spacing: 20px; 文字或字母间距
word-spacing: 20px; 单词间距
text-align: center; 块元素中的文字或图片剧中
元素内容与边框用padding-top:20px;之类设置，当只写padding:20px,20px,20px,20px;时，为上，右，下，左
元素与其他元素之间的边界用margin-top:20px之类来设置，当只写margin:20px,20px,20px,20px;时，为上，右，下，左
font-weight: ;属性设置文本的精细
其值有：
normal：默认值，定义标准字符
bold：粗体字符
bolder：更粗的字符
lighter：定义更细的字符
100~900：400等normal，700等bold
inherit：规定应该从父元素继承字体的粗细
white-space:;属性设置如何处理元素内的空白
其值有：
normal：默认，空白会被浏览器忽略
pre：空白会被浏览器保留,其行为方式类似Html中的 <pre> 标签
nowrap：文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止
pre-wrap：保留空白符序列，但是正常地进行换行
pre-line：合并空白符序列，但是保留换行符
in-herit：规定应该从父元素继承 white-space 属性的值
visibility: ;设置元素是否可见
其值有：
visible：默认值，元素是可见的
hidden：元素不可见
collapse：当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"
inherit：规定应该从父元素继承 visibility 属性的值
overflow: ; 属性规定当内容溢出元素框时发生的事情
其值有：
visible：默认值。内容不会被修剪，会呈现在元素框之外
hidden：内容会被修剪，并且其余内容是不可见的
scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
auto：处适配，如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
inherit：规定应该从父元素继承 overflow 属性的值
最后的";"可以不要，建议写上，方便以后修改添加
CSS样式的使用可分为三种：内联式、嵌入式、外部式
内联式：就是把CSS样式代码直接写在Html标签中
<p style="font-size:20px; color:red">这里的文字大小将是20px，颜色为红色</p>嵌入式：必须写在<style></style>之间，style一般写在<head></head>之间
如：
<style type="text/css">
p{
color: red;
}
</style>style="text/css"是告诉浏览器这里面的文本内容(text)要当层叠样式(css)来解析
外部式：也称为外联式，就是把CSS代码单独写在一个外部文件里，文件扩展名为“.css”，使用<link>标签将css样式链接到Html文件内，
如：
<link href="my.css" rel="stylesheet" type="text/css" />一般写在<head></head>标签中
三种样式写法的优先级：内联式>嵌入式>外部式
CSS选择器：标签选择器、类选择器、ID选择器、子选择器、通用选择器、伪类选择符、分组选择符
标签选择器：就是Html中的标签，如<html>、<body>、<a>、<p>、、<h1>、<img>等
类选择器：以英文“.”开头，名字任意，中文除外
如：
.myStyle{
color: red;
}使用时用class="类选择器名"
如
<span class="mystyle">这里的文字为红色</span>ID选择器：以"#"开头，名字任意，中文除外
如：
#myStyle{
color: red;
}如
<span id="myStyle">这里的文字为红色</span>类选择器可以为一个元素设置多个样式，而ID选择器不行
如：
.stress{
color: green;
}
.bigSize{
font-size: 20px;
}<span class="stress bigSize">字体为绿色，20px</span>而不能用ID
如：
#stressID{
color: green;
}
#bigSizeID{
font-size: 20px;
}<span id="stressID bigSizeID">这个用法是错的</span>如：
.first>span{
color: red;
}<p class="first">这个没有<span>第一个span里字体为红色<span>这是第二代，所以没有独立的样式</span><span>这也是第一代span，也有样式</span></span></p>包含(后代)选择器：就是在多个选择器之间加空格，
如：
.first span{
color: red;
}如：
.first li{
border: 1px solid red;
}<ul class="first">
<li>一</li>
<li>二</li>
<li>三</li>
</ul>
通用行径器：使用"*"来指定，功能最强大，作用于所有的html标签
如：
*{
color: red;
}伪类选择符：允许给html不存在的标签设置样式，如一个链接，在鼠标划过时，链接被点击，已选中等的颜色的改变
如：
/* 鼠标划过*/
a:hover{
color: red;
}
/* 已选中的链接*/
a:active{
color: #0000ff;
}<a href="http://www.dcloud.io/">HBuilder</a>如：
h1, h2{
color: red;
}CSS的继承性：某些样式具有继承性，有些没有，如设置h1标签的字体是红色，那么h1标签下包括子元素文本都红色，像border这个标签就不具有继承性
权值：当一个元素使用了多个CSS样式时，到底使用哪个样式就要看它们的权值了，哪个权值高就用哪个
标签权值：1
类选择符权值：10
ID选择符权值：100
p{color: green;}/*权值1*/
p span{color: white;}/*权值1+1=2*/
.weight{color: red;}/*权值10*/
p span .weight{color: yellow;}/*权值1+1+10=12*/
#selete .weight p{color: blue;}/*权值100+10+1=111*/当权值相同时，样式会用后面的覆盖前面的
如：
p{color: red;}
p{color: yellow;}<p>文字为黄色</p>如果我们想权值相同的样式不被覆盖，可以使用"!important"，来设置，注意要写在";"之前
如：
p{color: blue !important;}
p{color: red;}<p class="first">这时显示的内容就是蓝色</p>CSS3新增的内容
属性选择器
也是写在style里
[id*=div]{
color: red;
}
[id^=div]{
color: red;
}[id$=div]{
color: red;
}
如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
[id$="div"]{
color: red;
}
</style>
</head>
<body>
<div id="div1">无样式</div>
<div id="1div">有样式</div>
<div id="my">无样式</div>
</body>
</html>
结构性伪类选择器：
允许开发者根据文档的结构来指定元素的样式
first-line 就是在使用该样式的区域内的第一行使用该样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
p:first-line{
color: red;
}
</style>
</head>
<body>
<p>
第一行有样式<br />
第二行没有样式
</p>
</body>
</html>
first-letter
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
p:first-letter{
color: red;
}
</style>
</head>
<body>
<p>
第一个有样式<br />
第二行没有样式
</p>
</body>
</html>
如果是字母，则第一个字母有样式
before
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
p:before{
content: "添加在前面";
color: red;
}
</style>
</head>
<body>
<p>
测试用的
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
p:after{
content: "添加在后面";
color: red;
}
</style>
</head>
<body>
<p>
测试用的
</p>
</body>
</html>
root：根元素，会对整个页面产生影响，如果使用了body设置样式，那么body就只对内容部分添加样式，而root会对整个页面添加样式
<style>
:root{
background: blue;
}
</style><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div *:not(h1){
color: blue;
}
</style>
</head>
<body>
<div>
<h1>h1i被排除，没有样式</h1>
<h2>h2有样式</h2>
</div>
</body>
</html>
empty：在没有内容的区域将会添加样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
:empty{
background-color: blue;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td></td>
<td>无样式</td>
</tr>
<tr>
<td>无样式</td>
<td></td>
</tr>
</table>
</body>
</html>
target：是设置页内跳转后跳转到的内容的样式
:target{}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
/*第一个子标签*/
li:first-child{
color: red;
}
/*最后一个子标签*/
li:last-child{
background-color: greenyellow;
}
/*指定位置的标签*/
li:nth-child(3){
background-color: #19F8F8;
}
/*从后面数指定位置的标签*/
li:nth-last-child(2){
color: blue;
}
</style>
</head>
<body>
<ul>
<li>元素一</li>
<li>元素二</li>
<li>元素三</li>
<li>元素四</li>
<li>元素五</li>
<li>元素六</li>
</ul>
</body>
</html>
还有一个奇数和偶数的标签
例如：
/*even是正数，odd是奇数*/
/*正数偶数的li列表会有该样式*/
li:nth-child(even){}
/*倒数偶数的li列表会有该样式*/
li:nth-last-child(even){}
/*正数奇数的li列表会有该样式*/
li:nth-child(odd){}
/*倒数奇数的li列表会有该样式*/
li:nth-last-child(odd){}这种选择器会根据类型来选择，如只选择h1的偶数位。nth-of-type(even)
nth-child()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--
nth-child()
括号里的值为一组多少项*n+这组中的第几项，最后一个如3n+3可以写成3n
-->
<style>
li:nth-child(3n+1){
background-color: greenyellow;
}
li:nth-child(3n+2){
background-color: wheat;
}
li:nth-child(3n+3){
background-color: cadetblue;
}
</style>
</head>
<body>
<ul>
<li>组一1</li>
<li>组一2</li>
<li>组一3</li>
<li>组二1</li>
<li>组二2</li>
<li>组二3</li>
<li>组三1</li>
<li>组三2</li>
<li>组三3</li>
</ul>
</body>
</html>
only-child：当只有一个子元素时使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
li:only-child{
color: red;
}
</style>
</head>
<body>
<ul>
<li>一个元素</li>
</ul>
<ul>
<li>一个元素</li>
</ul>
<ul>
<li>两个元素</li>
<li>两个元素</li>
</ul>
</body>
</html><strong>
</strong>
通用兄弟元素选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
/*这里的div是子元素div,用“~”隔开为兄弟元素h1*/
div ~ h1{
color: red;
}
</style>
</head>
<body>
<div>
<div>
<h1>元素</h1>
<h1>元素</h1>
</div>
<h1>元素</h1>
<h1>元素</h1>
<h1>元素</h1>
</div>
</body>
</html>
可用CSS对文字添加阴影
text-shadow:length length length color
第一个参数：正数是向右，负数是向左，px
第二个参数：正数是向下，负数是向上，px
第三个参数：模糊程度，值越大越模糊，px
第四个参数：阴影颜色
可用","分隔开设置多重阴影
扫一扫
7681
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
