CSS心得总结
一、CSS的简介
（一）CSS的定义
层叠样式表。属性和属性值用冒号分隔开，以分号结尾(这些符号都是英文的)。
（二）CSS得引入方式
-
内联定义：
<div style="这里写样式">我是一个块级的标签</div> <标签 style="样式名:样式值;样式名:样式值;样式名:样式值;..."></标签> -
嵌入式：将CSS样式表放到head中用<style>标签包裹起来
<head> <style type="text/css"> 选择器 { 样式名 : 样式值; 样式名 : 样式值; ..... } 选择器 { 样式名 : 样式值; 样式名 : 样式值; ..... } </style> </head> -
链入外部样式表文件：（最常用）将一个独立的.css文件引入到HTML文件中，使用<link>标记写在<head>标记中。 链接式会以网页文件主体装载前装载CSS文件。
<head> ... <link href="My.css" rel="stylesheet" type="text/css"> <link type="text/css" rel="stylesheet" href="css文件的路径" /> </head> -
导入式： 将一个独立的.css文件引入HTML文件中，导入式使用@import 引入外部CSS文件。 导入式会在整个网页装载完后再装载CSS文件。
<head> ... <style type="text/css"> @import "My.css"; 此处注意.css文件的路径 </style> </head>
（三）样式的应用顺序
- 行内样式优先级最高
- 针对相同的样式属性，不同的样式属性将以合并的方式呈现
- 相同样式并且相同属性，呈现方式在中的顺序决定，后面会覆盖前面属性
- !important 指定样式规则应用最优先
二、选择器
（一）标签选择器（重点）
- 浏览器为HTML文档内标签名与标签选择器名相同的标签元素添加CSS样式
- 语法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
span{
color: blue;
font-family: Vladimir script,terminal;
}
h1{
color:red;
font-family: "楷体";
}
</style>
</head>
<body>
<h1>郑州</h1>
<span>郑州</span>
</body>
</html>
（二）类选择器（重点）
- 类选择器：浏览器为class标签属性的属性值与类选择器名相同的标签元素添加CSS样式。
-
语法：
.类名{ 样式名 : 样式值; 样式名 : 样式值; 样式名 : 样式值; .... }
.yanse{color:yellow}
<div class="yanse"/>我的div</div>
注意：
class标签属性的属性值不能以数字开头；
class标签属性的属性值可以有多个，每个值之间用空格间隔；
（三）id选择器（重点）
- id选择器：浏览器为id标签属性的属性值与id选择器名相同的标签元素添加CSS样式。（标签的id不可以重复）
-
语法：
#id{ 样式名 : 样式值; 样式名 : 样式值; 样式名 : 样式值; .... }
#Mycolor {color: yellow}
<h3 id="Mycolor">H3</h3>
注意：
id标签属性的属性值不能以数字开头；
id标签属性的属性值在HTML文档中必须唯一；class标签属性的属性值可以不唯一；
（四）后代选择器
后代选择器（descendant selector）又称为包含选择器，用于为特定的HTML子元素添加CSS样式。
/*匹配所有div标签里嵌套的P标签，之间用空格分隔*/
div p {color: yellow;}
<div>
<p>pppppp</p>
<div>
<p>pppppp</p>
</div>
</div>
如果HTML文档多个CSS样式表内的部分样式相同，则可以通过定义一个分组选择器以简化CSS样式代码， 该选择器的选择器名由多个选择器组成，使用逗号分隔。
（五）通配符选择器
通配符选择器匹配HTML文档中的任何HTML元素。
*{margin:0;padding:0;}
（六）组合选择器
将同样的定义应用于多个选择符，可以将选择符以逗号分隔的方式并为组。
<style type="text/css">
.class01 , #id01{
color: blue;
font-size: 20px;
border: yellow 1px solid;
}
</style>
三、CSS伪类与伪元素
CSS 伪类用于向某些选择器添加特殊的效果
| 属性 | 描述 |
|---|---|
| link | 向未被访问的链接添加样式。 |
| visited | 向已被访问的链接添加样式。 |
| hover | 当鼠标悬浮在元素上方时，向元素添加样式 |
| active | 向被激活的元素添加样式 |
<a href ="http://www.jd.com">链接</a>
<style>
/*
* 选择器：伪类
*/
a:link{
background-color:red;
}
a:visited{
background-color:black;
}
a:hover{
background-color: white;
}
a:active{
background-color: yellow;
}
</style>
CSS 伪元素用于向某些选择器设置特殊效果
| 属性 | 描述 |
|---|---|
| after | 在元素之后添加内容 |
| before | 在元素之前添加内容 |
四、常用CSS属性
（一）边框属性
div{
/*
* 设置边框
*/
border-top:1px dashed red;粗细,类型,颜色的顺序
border-bottom:1px solid red;
border-left:1px solid red;
border-right: 1px solid red;
heigt : 120px;
line-height: 120px;/*设置垂直居中*/
text-align: center;/*设置水平居中*/
}
（二）字体样式属性
<div>
heigt : 120px;
line-height: 120px;/*设置垂直居中*/
text-align: center;/*设置水平居中*/
font-style: italic;/*设置字体风格为斜体*/
font-weight: bold;/*设置字体粗细*/
font-size: 72px;/*设置字体大小*/
font-family: "宋体";/*设置字体系列*/
font:italic bolder 24px/120px 宋体;
/*font简写
* 1.必须至少有字体大小和字体类型
* 2.不能和line-height共生，或者用字体大小/line-height
*
*/
display: block;
}
（三）display样式属性
| 值 | 描述 |
|---|---|
| none | 此元素不会被显示 |
| block | 此元素将显示为块级元素，此元素前后会带有换行符 |
| inline | 此元素会被显示为内联元素，元素前后没有换行符 |
| inline-block | 行内块元素 |
<span style="border:1px solid red;width:120px;display: inline-block;"> zzu </span>
（四）margin和padding样式属性
p{
/*
* 用于设置内部元素距离边框的间距
*/
padding-left: 20px;
padding-top: 20px;
padding-bottom: 20px;
padding-right: 20px;
*
padding: 20px;
padding: 10px 50px;/*上下 左右*/
padding: 10px 50px 20px;/*上 左右 下*/
padding: 10px 50px 20px 50px;/*上 右 下 左，按照逆时针顺序*/
}
b{
margin-bottom: 50px;
margin: 50px;/*上下左右*/
margin: 10px 50px;/*上下 左右*/
margin: 10px 50px 10px;/*上 左右 下*/
margin: 10px 50px 10px 50px;/*上 右 下 左*/
}
（五）position样式属性
| 值 | 描述 |
|---|---|
| static | 默认值 |
| relative | 相对于之前的位置定位 |
| absolute | 相对于父标签定位，该父标签的position非static |
| fixed | 相对于浏览器窗口进行定位 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id = "container">
<div id = "first"></div>
<div id = "second"></div>
<div id = "third"></div>
</div>
<style>
#container{
width:300px;
height:300px;
border: 10px solid yellow;
}
#first,#second,#third{
width:100px;
height:100px;
}
#first{
background-color: red;
}
#container{
position: relative;
}
#second{
/*
* fixed
* 相对于浏览器窗口进行定位
*/
position: fixed;
bottom: 10px;
right: 10px;
/*
* relative;
* 相对于之前的位置定位
*/
position: relative;
top:10px;
right:10px;
/*
* absolute
* 相对于父标签定位，该父标签的position非static
*/
position: absolute;
top:10px;
right:10px;
background-color: green;
}
#third{
width:120px;
background-color: blue;
}
</style>
</body>
</html>
（六）列表属性
list-style-type: 列表项标志的类型
- none 去除标志
- decimal-leading-zero;
- square; 方框
- circle; 空心圆
- upper-alph; 实心圆
list-style-image：将图象设置为列表项标志
list-style-position：列表项标志的位置
- inside
- outside
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul,li{
border: 1px solid red;
}
ul{
list-style-type: none;/*设置类型*/
list-style-position:inside;
list-style-image: url(img/png-0726.png);
padding-left: 0px;
}
</style>
</head>
<body>
<ul>
<li>英语</li>
<li>语文</li>
<li>数学</li>
<li>历史</li>
</ul>
</body>
</html>
（七）浮动样式属性
float样式属性
| 值 | 描述 |
|---|---|
| none | 默认值，元素不浮动 |
| left | 元素向左浮动 |
| right | 元素向右浮动 |
clear样式属性
| 值 | 描述 |
|---|---|
| left | 在左侧不允许浮动元素 |
| right | 在右侧不允许浮动元素 |
| both | 在左右两侧均不允许浮动元素 |
| none | 默认值。允许浮动元素出现在两侧 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#header{
border:1px solid red;
}
#header:after{
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<div id = "header">
<img style="float: left;" src = "img/body_bg.jpg" /> <!--图片左浮动-->
<img style="float: right;" src = "img/body_bg.jpg" /><!--图片右浮动-->
</div>
</body>
</html>
（八）常用样式
-
字体颜色
color：red； 颜色可以写颜色名如：black, blue, red, green 等 颜色也可以写 rgb 值和十六进制表示值：如 rgb(255,0,0)，#00F6DE，如果写十六进制值必 须加# -
宽度
width:19px; 宽度可以写像素值：19px； 也可以写百分比值：20%； -
高度
height:20px; 高度可以写像素值：19px； 也可以写百分比值：20%； -
背景颜色
background-color:#0F2D4C -
字体样式：
color：#FF0000；字体颜色红色 font-size：20px; 字体大小 -
红色 1 像素实线边框
border：1px solid red; -
DIV 居中
margin-left: auto; margin-right: auto; -
文本居中：
text-align: center; -
超连接去下划线
text-decoration: none; -
表格细线
table { border: 1px solid black; /*设置边框*/ border-collapse: collapse; /*将边框合并*/ } td,th { border: 1px solid black; /*设置边框*/ } -
列表去除修饰
ul { list-style: none; }
5313
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
