1.css导入
<!--外部样式-->
<link rel="stylesheet" href="css/style.css" />
rel:导入的样式表
href： css文件的路径
2. 选择器
2.1基本选择器
基本选择器有三种：id选择器>类选择器>标签选择器
在同一个页面内所有的标签的id属性值必须是唯一的(不能有重复)
在同一个页面内所有的标签的class属性值可以重复，一般同级的、相同标签会使用一样类的class值
标签选择器:
标签名 {
样式...
}
标签可以是html的任何标签,
表示选中此页面的所有此标签，并添加{}内的样式;
类选择器：
class属性值{
样式...
}
向有此class属性值的标签内容添加样式
id选择器：
id属性值{
样式...
}
向有此id属性值的标签内容添加样式
2.2层次选择器
1.后代选择器：在某个元素的后面
/*后代选择器：中间是空格*/
选择器1 选择器2{
样式...
}
选择器1和选择器2可以是 基本选择器或是层次选择器，但选择器1必须是选择器2父级标签或祖辈
选择器1和选择器2可以是基本选择器或是层次选择器，但选择器1必须是选择器2的父级标签或祖辈
2.子选择器，一代
/*子选择器:中间是大于号*/
选择器1 > 选择器2{//中间是 >
样式...
}
选择器1和选择器2可以是 基本选择器或是层次选择器，而且选择器2必须选择器1的下一代（只有一代哦）才有效
选择器1和选择器2可以是基本选择器或是层次选择器，而且选择器2必须选择器1的下一代（只有一代哦）才有效
3.向下一个相邻的兄弟选择器 同辈
/*向下相邻兄弟选择器：只有一个，相邻（向下）*/
选择器1 + 选择器2{//中间是 +
样式...
}
选择器1和选择器2可以是 基本选择器或是层次选择器，而且选择器2必须选择器1的同辈并且是与选择器1相邻的下一个才有效
选择器1和选择器2可以是基本选择器或是层次选择器，而且选择器2必须选择器1的同辈并且是与选择器1相邻的下一个才有效
4.向下同辈的兄弟选择器
/*向下同辈的兄弟选择器 :*/
选择器1 ~ 选择器2{//中间是 ~
样式...
}
选择器1和选择器2可以是**基本选择器**或是**层次选择器**，而且选择器2必须选择器1的**同辈**并且是在选择器1**后面**才有效
选择器1和选择器2可以是基本选择器或是层次选择器，而且选择器2必须选择器1的同辈并且是在选择器1的后面才有效
3.结构伪类选择器类
<style>
/*选择器1的父元素的第一个子元素，而且这第一个子元素还要是选择器1选择得到的元素*/
选择器1:first-child{
background: aqua;
}
/*选择器1的父元素的最后一个子元素，而且这最后一个子元素还要是选择器1选择得到的元素*/
选择器1:last-child{
background: blue;
}
/*选中p1：定位到父元素，选择当前的第一个元素
选择当前p元素 的父级元素，选中父级元素的第一个，并且是当前元素才生效！
*/
p:nth-child(1){
background: orange;
}
/*选中父元素下的，第2个p元素*/
p:nth-of-type(2){
background: red;
}
</style>
4.属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.demo a{
display: block;
height: 50px;
width: 50px;
float:left;
border-radius: 10px;
background: blue;
text-align: center;
color: beige;
text-decoration: none;
margin-right: 5px;
font: bold 20px/50px Arial;
}
/*属性名，属性名=属性值（正则）
=表示绝对等于
*=表示包含
^=表示以...开头
$=表示以...结尾
存在id属性的元素 a[]{}
*/
/* a[id]{
background: red;
}*/
/*id=first的元素*/
/* a[id=first]{
background: aqua;
}*/
/*class中有links元素*/
/* a[class = "links item2 first2"]{
background: orange;
}*/
/*a[class*="links"]{
background: black ;
}*/
/*选中href中以http开头的元素*/
a[href^="http"]{
background: orange;
}
</style>
</head>
<body>
<p class="demo">
<a href="http://www.baidu.com" class="links item first" id="first">1</a>
<a href="/adad/faf" class="links item2 first2" >2</a>
<a href="qwe123" class="links item3 first3" >3</a>
<a href="eweqe" class="links item4 first4" >4</a>
<a href="rrrrr" class="links item5 first5" >5</a>
<a href="ttt" class="links item6 first6" >6</a>
<a href="yyy" class="links item7 first7" >7</a>
</p>
</body>
</html>
5.美化网页
5.1：字体设置
选择器{
font-family:楷体;//设置字体
color：red;//设置文本颜色red/#fff/rgb(1~255,1~255,1~255)/rgba(1~255,1~255,1~255,0~1)//四种表示方法0~1表示透明度
font-size： 50px;//设置文字大小 单位 px
font-weight：blod;//文字加粗
font-weight:bolder;//文字加粗 也可以填px，但不能超过900,相当于bloder
/*常用写法：*/
font:oblique bloder 12px "楷体"//联合写法
}
5.2：文本设置
color: red/#fff/rgb(1~255,1~255,1~255)/rgba(1~255,1~255,1~255,0~1)//四种表示方法0~1表示透明度
文本对齐方式–>text-align：center
首行缩进–>text-indent：2em
行高–>line-height：300px；
下划线–>text-decoration：none//可适用于超链接<a>
text-decoration:underline/*下划线*/
text-decoration:line-through/*中划线*/
text-decoration:overline/*上划线*/
text-decoration:none/*超链接去下划线*/
img,span{vetical-align:middle}//图片文字水平对齐
a{/*超链接有默认的颜色*/
text-decoration:none;
color:#000000;
}
a:hover{/*鼠标悬浮的状态*/
color:orange;
}
a:active{/*鼠标按住未释放的状态*/
color:green
}
a:visited{/*点击之后的状态*/
color:red
}
/* 第一个参数：表示水平偏移
第二个参数：表示垂直偏移
第三个参数：表示模糊半径
第四个参数：表示颜色
*/
text-shadow:5px 5px 5px 颜色//设置阴影
5.3：列表ul li
/*list-style{
none:去掉原点
circle：空心圆
decimal：数字
square：正方形
}*/
5.2：背景设置
//背景图片设置
background-image:url("");/*默认是全部平铺的*/
background-repeat:repeat-x/*水平平铺*/
background-repeat:repeat-y/*垂直平铺*/
background-repeat:no-repeat/*不平铺*/
background-size: 50px 50px//第一个数是宽度 第一个数是高度 单位 px/%
background:red url("图片相对路劲") 270px 10px no-repeat//中间两数用来改变图片位置
background-position：/*定位：背景位置*/
5.2：盒子模型
盒子的计算方式：
margin+border+padding+内容的大小
- margin：外边距//不会改变宽高
- padding：内边距//会改变自己的宽高
- border：边框
border：粗细 样式(实线，虚线) 颜色
margin-left/right/top/bottom–>表示四边，可分别设置，单位 px/% 也可以同时设置如下
margin:0 0 0 0/*分别表示上、右、下、左；从上开始顺时针*/
/*例1：居中*/
margin:0 auto /*auto表示左右自动*/
/*例2：*/
margin:4px/*表示上、右、下、左都为4px*/
/*例3*/
margin:10px 20px 30px/*表示上为10px，左右为20px，下为30px*/
总结：
body总有一个默认的外边距 margin:0
常见操作：初始化
margin:0;
padding:0;
text-decoration:none;
5.3：浮动
块级元素：独占一行 h1~h6 、p、div、 列表…
行内元素：不独占一行 span、a、img、strong
注： 行内元素可以包含在块级元素中，反之则不可以。
块级元素：独占一行 h1~h6 、p、div、 列表…
行内元素：不独占一行 span、a、img、strong
注： 行内元素可以包含在块级元素中，反之则不可以。
border-radius有四个参数（顺时针），左上开始
圆圈：圆角=半径
{
display：
block：块元素
inline：行内元素
inline-block：是块元素，但是可以内联，在一行
这也是一种实现行内元素排列的方式，但是我们很多情况用float
display:block；//默认块级元素
display: inline-block;//行内元素
}
{
float：left/right左右浮动
clear：
right：右侧不允许有浮动元素
left：左侧不允许有浮动元素
both：两侧不允许有浮动元素
none：
解决塌陷问题方案：
方案一：增加父级元素的高度； //简单、代码尽量避免空div
方案二：增加一个空的div标签，清除浮动； //简单，元素假设没有了固定的高度，就会超出
方案三：在父级元素中增加一个overflow：hidden； //简单，下拉的一些场景避免使用
方案四：父类添加一个伪类:after； //写法稍微复杂，但是没有副作用，推荐使用
#father:after{
content:'';
display:block;
clear:both;
}
}
display：方向不可以控制
float：浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题。
5.4：定位
/*相对定位: position: relative;
是相对自己原来的位置来定位
将原位置作为参照物，
用top,left,right,bottom来表示
参照物在现在位置的什么方位以及距离
相对于原来的位置，进行指定的偏移，相对定位的话，它仍然在标准文档流中，原来的位置会被保留
*/
/*绝对定位：position: absolute;
在父级元素范围内移动
将有相对定位的父级元素（一直向上找，直到浏览器对象）作为参照物
用top,left,right,bottom来表示
现在位置在父级元素的什么方位以及距离
一般来说当子元素使用绝对定位时，父级元素使用先对定位但不设置方位（子绝父相）
相对一父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留
*/
/*固定定位： position: fixed;
参照物只能是是浏览器窗口
用top,left,right,bottom来表示
现在位置在浏览器的什么方位以及距离
*/
z-indexnum；num大小决定级别
图层~
z-index：默认是0，最高无限~999
226
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
