本文详细介绍了CSS样式的三种编写方式：内联样式、内部样式和外部样式，强调了它们的使用场景和优先级。接着，重点讲解了CSS选择器，包括基本选择器、伪类选择器和复杂选择器，并通过实例展示了如何利用选择器实现特定的布局效果。此外，还提及了CSS盒子模型和背景属性的应用。
一：css样式编写3种方式
1.内联样式（inline):使用style属性声明在元素中
eg: <div style=" "> </div>
2.内部样式（inner）:写在style标签里
eg:<head><style type="text/css">...</style></head>
3.外部样式（outer）：创建一个独立的.css文件
<head>
<link rel="styleSheet" type="text/css" href="x.css"/>
</head>
3种方式的使用原则：
（1）内联样式只对当前元素有效；内部样式对当前整个页面有效；外部样式对所有引用它的页面都有效（可用于控制全站的风格）
（2）内联样式尽量少用；内部样式可以适量使用（全站中只有一个页面中使用的样式）推荐使用外部样式（外部文件不要太多）。
补充：css样式的优先级
！important>内联样式>内部/外部样式（#ID选择器>类选择器/伪类选择器>元素选择器）>浏览器预定义样式
二.css基本语法：
属性名：属性值；
内部/外部css:
选择器{
属性名：属性值；
...
属性名：属性值；
}
（一）CSS选择器（重点）
1.基本选择器：（说明：javascript/jquery中也可以使用类似css中的选择器进行元素的选择）
（1）通用选择器：*{...} 选择页面中的所有元素（所有页面几乎都要写这个，不写就默认，浏览器不同，所有默认值就不同）；
eg:*{margin:0;
padding:0;
}
（2）元素选择器：元素名{...} 选择指定的元素 eg: div{...} ，p{...} 等元素；
（3）ID选择器： #ID值{...} 仅选择具有指定ID的元素；
（4）类别选择器： .类名{...} 选择具有指定class的所有元素
（5）并列/过滤选择器：选择器1选择器2{...} 选择可被两个选择器同时选定的元素
（6）父子选择器：选择器1 选择器2{...}选择可被选择器1选择的元素下的所有子元素中可被选择器2选中的元素。
（7）直接子元素选择器：选择器1>选择器2{...}选择选择器1中的直接子元素中可被选择器2选中的元素（ IE6不支持）
（8）多选选择器：选择器1，选择器2，...选择器n{...}选择可被任何一个选择器选中的元素
（9）伪类选择器： ：伪类名{...}
1)连接伪类
: link,适用于尚未访问的链接
eg: a:link{color:#004276;
text-decoration:none;
}
：visited,适用于访问后的链接
a:visited{
color:#004276;
}
2)动态伪类
：hover ,适用于鼠标悬停在HTML元素时，div、p、a等元素都可用
eg: a:hover{color:#BA2636;
text-decoration:underline;
}
div:hover{
color:#BA2636;
border:1px solid red;
}
3)动态伪类
:active,适用于HTML元素被激活时（鼠标点击放开后）
eg: a:active{color:yellow;
}
4)动态伪类
:focus,适用于HTML元素获取焦点时
eg: input:foucs{border:1px solid red;
}
5）目标伪类选择器(ie8不支持)
：target，目标元素的选定
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
a:target{border: 2px solid #f00;}
div{display:none;}
div:target{border: 2px solid #f00;
display:block;
}
</style>
</head>
<body>
<a href="#lian1">链接1</a>
<a href="#lian2">链接2</a>
<a href="#lian3">链接3</a>
<a href="#lian4">链接4</a><br/>
<a name="lian1">锚点1：链接1的目标元素</a>
<div id="lian2">锚点2：链接2的目标元素</div>
<div id="lian3">锚点3：链接3的目标元素</div>
<div id="lian4">锚点4：链接4的目标元素</div>
</body>
</html>6）状态伪类(一般用于表单，更多用于js)
：enabled input:enabled{...} 匹配当前启用的表单元素
：disabled :disabled{...} 匹配当前禁用的表单元素
：checked :checked {...} 匹配当前选定的表单元素
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
input:enabled{
border:1px solid #ff0000;
}
:disabled{
background-color:aqua;
}
:checked{
box-shadow:6px 6px #666;
}
</style>
</head>
<body>
<form action="" >
<label for="t1">用户名：<input type="text" name="text1" id="t1"></label><br/>
<label for="p1">密 码：<input type="password" name="password1" id="p1"></label><br/>
<input type="radio" name="x1">男
<input type="radio" name="x1">女<br/>
<select>
<optgroup label="地址">
<option value="cq">重庆</option>
<option value="gz">广州</option>
<option value="sh">上海</option>
</optgroup>
</select><br/>
<textarea>请输入你的签名...</textarea><br/>
<input type="checkbox">我同意就接受此条款<br/>
<input type="submit" value="提交" disabled="true">
<input type="reset" value="重置">
</form>
</body>
</html>7) 结构伪类
：last-child p:last-child{...} 匹配所有同级中的最后一个p元素
p :last-child{...} 匹配p下最后一个子元素
：only-child p:only-child{...} 匹配所有同级中的唯一的一个p元素
：first-child div: first-child{...} 匹配父元素中的第一个子元素（必须是标签，纯文本不算）
：empty div:empty{display:none;} 匹配没有子元素的元素（且没有任何文本内容的元素）
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
div :first-child{
border:1px solid #ff0000;
}
div:first-child{
background-color:aquamarine;
}
div :only-child{
padding: 10px;
}
</style>
</head>
<body>
<div id="div1">
<p>文本1</p>
<p>文本2</p>
<span>文本3</span>
<div>
<p>文本4</p>
</div>
</div>
<div id="div2">
12343345
<span>文本8</span>
<p>文本5</p>
<p>文本6</p>
<span>文本7</span>
<p>文本8</p>
</div>
<div>
<div>div1</div>
</div>
</body>
</html> 2.css复杂选择器：（提示：使用jquery可以兼容所有下述复杂选择器；复杂选择器的使用可以减少页面中id和class的出现频率。）
| 复杂选择器 | 示例 | 含义 | 版本/兼容性 |
| 选1 选2 | div ul{...} | 子代选择器 | css1 |
| 选1>选2 | div>ul{...} | 直接子代选择器 | css2 |
| 选1+选2 | input+span{...}对紧跟在input后的一个span设样式 | 相邻兄弟选择器：选择紧挨着的下一个兄弟元素（选中0/1个） | css2 /IE6不支持 |
| 选1~选2 | div~span{...}查找某一个指定元素的后面的所有兄弟节点。 | 通用兄弟选择器：匹配选择器1的兄弟元素中匹配选择器2的元素。 | css3 注意：div后的兄弟会选定，之前的不会。 |
| [属性名] | [href]{ text-decoration:none; color:red; } | 选择具有指定属性的元素 | css2 |
| [属性名=属性值] | [type="text"]{ border:2px solid green; } | 匹配具有指定属性且属性值为指定值 | css2 |
| [属性名~=属性值]必须出现完整单词 | [class~="strong“]{...}可以选定引号内出现了strong这个单词的 | 匹配具有指定的属性且属性值中包含指定的单词。（必须是完整的单词，不是单词不行） | css3 |
[属性名*=属性值] 只需要出现指定字母 | [class*=str]可以选定引号内出现了str这三个字母的 | 匹配具有指定的属性且属性值中包含指定的字母组合（不必是完整的单词） | css3 |
[属性名^=属性值] 头（字母） | [class^=str] | 匹配具有指定的属性，且属性值以指定的字母开头 | css3 |
| [属性名$=属性值] | [class$=str] | 匹配具有指定的属性，且属性值以指定的字母结尾 | css3 |
| [属性名 |=属性值] | [class |=str] | 匹配具有指定的属性且属性值以指定的完整的单词开头（不能是字母） | css3 |
3.内容生成选择器
XHTML规定：页面内容交给标签来处理；页面表现交个css来处理。但css3有些“内容生成”选择器不单单可以呈现样式，还可以向页面中添加内容。
（1）选择器1:before{
......
content:存文本/图像/计数器；
}
(2) 选择器1:after{
......
content:存文本/图像/计数器；
}
content属性必须配合：before/after选择器使用。
案例：
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
/*p:before{
content:'子曰：';
}*/
p:after{
content:'--摘自《论语》';
}
body{
counter-reset:MyCount1 -1;
}
p:before{
content:'<'counter(MyCount1)'>';
}
p{
counter-increment:MyCount1 2;
}
</style>
</head>
<body>
<p>鹅，鹅，鹅,</p>
<p>曲项向天歌；</p>
<p>白毛浮绿水，</p>
<p>红掌拨清波。</p>
</body>1）解决父元素的一个子元素的margin-top越界问题
为父元素添加前置内容:
.parent:before{
content:' ';
display:table;
}
2)解决所有的子元素浮动后父元素高度为0，且影响后续元素问题
为父元素添加后置内容生成：
.parent:after{
content: ' ';
display:table;
clear:both;
}
案列2
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.parent1 {
width: 400px;
height: 200px;
background: #faa;
}
.parent2 {
width: 400px;
height: 200px;
background: #afa;
/*border-top: 1px solid #000;*/
/*padding-top: 1px;*/
/*overflow: hidden;*/
}
.parent2:before {
content: ' ';
display: table;
}
.child2 {
width: 200px;
height: 100px;
background: #aaf;
margin-top: 20px;
}
p:before {
content: '子曰:';
color: red;
margin-right: 5px;
display: inline-block;
}
p:after {
content: '——摘自论语';
color: #aaa;
font-style: italic;
}
hr {
margin: 0;
}
</style>
</head>
<body>
a<table></table>b
<h1>第一个子元素的margin-top越界问题</h1>
<div class="parent1"></div>
<div class="parent2">
<div class="child2"></div>
</div>
<hr>
<p>三人行必有我师</p>
<p>学而时习之不亦说乎</p>
<p>有朋自远方来不亦乐乎</p>
<br><br><br><br><br><br><br><br><br><br>
</body>
</html>案列3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.parent {
width: 600px;
/*height: 400px;*/
background: #faa;
}
.parent:after {
content: ' ';
display: table;
clear: both;
}
.child1 {
width: 200px;
height: 150px;
background: #afa;
float: left;
}
.child2 {
width: 200px;
height: 150px;
background: #aaf;
float: left;
}
</style>
</head>
<body>
<h1>子元素浮动对父元素、后续元素造成的影响</h1>
<div class="parent">
<div class="child1">1111</div>
<div class="child2">2222</div>
</div>
<hr>
<br><br><br><br><br><br><br><br><br><br>
</body>
</html>（1）width/height 指定元素的宽高（block，img,table元素才可以） 单位：% px em （2）min-width/height 定义元素的最小宽高
（3）max-width/height 定义元素的最大宽高
（4）overflow 规定当内容溢出元素框时发生的事情
* visible:默认值，内容不被修剪。
* hidden：内容会被修剪，并且其余内容不可见。
* scroll:内容会被修剪，出现滚动条可以看其他内容。
* auto :如果被修剪，出现滚动条。
* inherit:规定应该从父元素继承overflow属性的值。
（5）text-align 对齐方式
* left:左对齐；
* center:居中对齐；
* right:右对齐；
（6）line-height 行高（内联元素引用，竖直方向上留空白）
（7）text-decoration none(无任何线) underline(下划线) overline(文本上的一条线) line-through(删除线)
（8）border 边框 1px solid red;(宽度样式颜色顺序来写)
* width:宽度；
* style:样式；(solid,none,double,dotted,dashed,groove,ridge,inset,outset)
* color :颜色；
（9） outline 外轮廓（不占元素空间）
* width:宽度；
* style:样式；
* color :颜色；
* style:样式；
* color :颜色；
（10）border-radius 边框倒角、边框半径，绘制圆角边框
*4个角可以单独定义，一起定义的话按顺时针顺序设置4个倒角(左上右上右下左下)，取值为绝对值或百分比 值越大，边角越圆。（必须还得指定边框才看得到效果）
border-radius: 25% 20% 30% 10%；
（11）box-shadow 向方框添加一个或多个阴影 取值为多个属性值的列表（不占空间）
#d1{
border:6px solid #888;
box-shadow:15px 10px #666 inset;
// 15为水平阴影位置，正为右，负为左；10为垂直阴影位置，正为下负为上；阴影颜色，无 为黑色；有为内部阴影，无为（outset）外部阴影；
}
（12）border-collapse:collapse; 合并边框
（13）padding 内容与边框之间的距离 可以为像素、百分比、但不能为负数。
* left
* right
* top
* bottom
padding:10px 20px 30px 40px; (上右下左顺序定义)
（14）margin 外边距 （语法与padding一致）
补充padding,margin知识（重点、难点）
css盒子模型：
1) box-sizing 盒子模型的计算方法
* context-box （默认值） 一个盒子的宽度等于margin+border+padding+width
* border-box (推荐使用) 一个盒子的宽度等于margin+width 便于排版计算可以省去很多麻烦
2)两个相邻元素若都指定了间距，那么间距会进行合并，合并后的值时二者指定的间距中的较大值（浮动会产生影响，间距不能合并）
3）区块元素若想在父元素中水平居中，margin:0 auto; 有浏览器自动计算左右间距--平均分
4）
marginx marginy paddingx paddingy BLOCK不浮动 占用空间 占空间、会合并 占用空间 占用空间 BLOCK浮动 占用空间、不合并 占空间、不合并 占空间 占空间 INLINE 占空间、不合并 无效 占空间 有效、不占空间（重叠） (15) background-color 设置元素背景色（内容+填充+边框 ,不会占据外边距）
(16)background-image 背景图片 url(xx.png)
(17)background-repeat
* no-repeat 不重复
* repeat-x 只水品平铺
* repeat-y 只垂直平铺
(18)background-position 控制图片位置
* left *center *right 还可以设置像素来控制（20px 30px）
(19)background-attachment 背景滚动方式
scroll:背景随内容滚动
fixed：背景固定不动
(20)background-image 凡是使用背景图片的地方都可以使用渐变作背景
linear-gradient 线性
redial-gradient 径向
repeating-radial-gradient 重复镜像
repeating-linear-gradient 重复线性
eg:#d1{
background-image:Linear_gradient(to bottom,red,#fff);
}
#d2{
background-image:Linear_gradient(90deg,red 0,#ccc 30%);
}
注：小生总结知识比较片面，比如想更详细的了解css属性还是以css官方为主，后续还会在对css定位、css3中的变形/转换，动画，媒体查询相关的知识在详细总结。
扫一扫
2377
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
