一、属性和属性值的定义
1.引入
(1)每个CSS样式由两部分组成，即选择符和声明，声明又分为属性和属性值；
(2)属性必须放在花括号中,属性与属性值用冒号连接
(3)每条声明用分号结束
(4)当一个属性有多个属性值的时候，属性值与属性值不分先后顺序，用空格隔开
(5)在书写样式过程中，空格，换行等操作不影响属性显示
- 内部样式
<!-- 选择器（选择符）{属性：属性值；}-->
<style>
h1{
color:red;
}
</style>
-
外部样式
<!--css文件--> h1{ color:red; }link：利用link或者import引入css文件
rel:定义关联性 stylesheet样式表
<head>
<!--外部引入css文件-->
<link rel="stylesheet" type="text/css" href="css文件的路径"/>
</head>
<style>
@import url("css文件路径")
</style>
-
行内样式
<div style="width:200px; height:200px;"> </div>优先级
-
行内>内部>外部
-
就近原则
-
!important 可以改变优先级，优先级最高
2.class选择器
语法：.class名{属性：属性值;}
说明：
A.当我们使用class选择符时，应先为每个元素定义一个class名称
B.class选择符的语法格式是:
如:
.top{width:200px;height:100px;background:green;}
用法：class选择符更适合定义一类样式；
3.id选择器
语法：#id{属性：属性值}
说明：
A.当我们使用id选择符时 ，应该为每个元素定义一个id属性
如：
B.id选择器的语法格式是“#”加上自定义的id名
如：#box{width:300px;height:300px;}
C.起名时要取英文名，不能用关键字：（所有的标记和属性都是关键字）
如：head标记
D.一个id名称只能对应文档中一个具体的元素对象。（唯一性）
4.*通配符/通配选择器
语法：*{属性：属性值；}
说明：通配选择符的写法是“*”,其含义就是所有元素
*{margin:();padding:0;}代表清除所有元素的默认边距值和填充值；
5.群组选择器
语法：选择符1，选择符2，选择符3…{属性：属性值；}例：#top1,#nav1,h1{width:960px;}
说明：当有多个选择应用相同的声明时，可以将选择符用“，”分隔的方式，合并为一组。
margin:()auto;现实盒子的水平居中
6.包含选择器/后代选择器
语法：选择符1 选择符2{属性：属性值；}
说明：含义就是选择符1中包含的所有选择符2；
用法：当我的元素存在父级元素的时候，我要改变自己本身的样式，可以不另加选择符，直接用包含选择器的方式解决。
如：结构：
样式：.listli{background:red;}
div,p,hi{ background-color:yellow; }7.伪类选择器
语法：
a:link{属性：属性值；}超链接的初始状态；
a:visited{属性：属性值；}超链接被访问的状态；
a:hover{属性：属性值；}鼠标悬停，即鼠标划过超链接的状态;
a:active{属性：属性值；}超链接被激活时的状态，即鼠标按下时超链接的状态；
Link-visited-hover-active
说明：
A.当这4个超链接伪类选择符联合使用时，应注意他们的顺序，正常顺序为：
a:link，a:visited,a:hover,a:active,错误的顺序有时会使超链接的样式失效；
B.为了简化代码，可以把伪类选择符中相同的声明提出来放在a选择符中；
例如：啊{color:red;}a:hover{color:green;}表示超链接的初始和访问过后的状态一样，鼠标划过的状态和点击时的状态一样。
8.选择器的权重
当多个选择器，选中的是同一个元素，且都为他们定义了样式，如果属性发生冲突了，会选择权重高的来执行
- important> 内联样式>包含选择符>id选择器>class选择器>元素
- 相同钻则符采取就近原则
二、css文本属性
-
font-size ：字体大小，单位是px，浏览器默认是16px，设计图常用字号是12px
-
font-family：字体，当字体是中文字体、英文字体中有空格时，需要加双引号；多个字体中间用逗号链接，先解析第一个字体，如果没有解析第二个字体，以此类推
-
color ：颜色，color:red;color:#ff0;color:rgb(255,0,0);0-255
-
font-weight :加粗
- font-weight:bolder(更粗的)/bold(加粗)/normal(常规)
- font-weight:100-900;100-500不加粗 600-900加粗
-
font-style:倾斜，font-style:italic(斜体字)/oblique(倾斜的文字)/normal(常规显示)
-
text-align:文本水平对齐
- text-align:left水平靠左
- text-align:right水平靠右
- text-align:center水平居中
- text-align:justify水平2端对齐，但是只对多行起作用
-
line-height:行高 ：line-height的数据=height的数据，可以实现单行文本垂直居中
-
text-indent：2em 首行缩进,text-indent可以取负值；text-indent属性只对第一行起作用
-
letter-spacing:字间距，控制文字和文字之间的间距
-
text-decoration:文本修饰，text-decoration:none没有/underline下划线/overline上划线/line-through删除线
-
font：文字简写,font是font-style font-weight font-size/line-height font-family的简写。font:italic 800 30px/80px“宋体”;顺序不能改变，必须同时指定font-size和font-family属性时才起作用
-
text-transform :大小写
text-transform:capitalize;//每一个单词首字母大写 text-transform:lowercase;//将大写字母转为小写字母 text-transform:uppercase;//将小写字母转为大写字母
三、css列表属性
- list-style-type:定义列表符合样式，list-style-type:disc（实心圆）/circle(空心圆)/square(实心方块)/none（去掉符号）
- list-style-image:将图片设置为列表符合样式，lsit-style-image:url();
- list-style-position:设置列表项标记的放置位置。
- list-style-position:outside;列表的外面 默认值
- list-style-position:inside ;列表的里面
- list-style:简写，list-style-none;去除列表符号
四、CSS背景属性
-
background-color:背景颜色
background-color:red background-color:rgb(255,0,0); background-color:rgba(255,0,0,0.5)0.5为透明度 -
background-image:背景图片
background-image:url(); -
background-repeat:背景图片的平铺
background-repeat:no-repeat/repeat/repeat-x/repeat-y; -
background-position:背景图片的定位
background-position:水平位置 垂直位置;可以给负值 left center right top center bottom -
background-attachment:背景图片的固定
background-attachment:scroll(滚动)/fixed(固定，固定在浏览器窗口里面，固定之后就相对于浏览器窗口了) //可以做视差效果- background-size:背景大小
1.400px 400px 2.100% cover:把背景图像扩展至足够大，以使背景图像完全覆盖背景区域，部分也许无法显示在背景定位区域中 contain:把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。但可能出现留白可以简写为background
-
background-color
-
复合写法“
- 用空格隔开
- 顺序可以换
- 可以只取一个值，放在后面能覆盖前面的值
background:yellow url no repeat center fixed -
background-size:
五、CSS边框属性
六、CSS浮动属性
- 作用：定义网页中其他文本如何环绕该元素显示
- 让竖着的东西横着来
- float:left 元素靠左边浮动
- float:right 元素靠右边浮动
- float:none;元素不动
盒子模型
盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间，即都包含边框、边界、补白、内容区。这就是盒模型。
-
padding:内边距
背景色蔓延到内边距
1个值，四个方向一样
2个值，上下，左右
3个值。上，左右，下
4个值，上，右，下，左
padding-top:上内边距。
padding-bottom：下内边距。
padding-left：左内边距。
padding-right：右内边距。
-
border:10px solid red;边框
背景色蔓延到边框
样式：solid（实线）double（双实线）dashed（线段线）dotted（点状线）
-
boder-width
-
boder-style
-
border-color :yellow blue black red
-
可以为负值
-
margin:50px;外边距
-
背景色未蔓延
-
margin-top
-
margin:0 auto ;居中
-
*{margin：0}清零
溢出属性
1.容器的
overflow:visible/hidden(隐藏)/scroll/auto/inherit;
visible:默认值，溢出内容会显示在元素之外；
hidden:溢出内容隐藏；
scroll:滚动，溢出内容以滚动方式显示；
auto:如果有溢出会添加滚动条，没有溢出正常显示；
inherit：规定应该遵从父元素继承overflow属性的值。
overflow-x：X轴溢出；
overflow-y:Y轴溢出
宽高自适应
自适应
- 网页布局中经常要定义元素的宽和高，但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是自适应
宽度自适应高度自适应
（1）宽度自适应
元素宽度的默认值为auto
（2）高度自适应
元素高度的默认值{height：auto}
应用：导航栏，通栏布局
mix-height:200px(最小高度 )
mix-width:20px;
max-height:20px’
max- width:20px;
- 父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷
- ，方法一：给父元素添加声明overflow:hidden;(缺点：会隐藏溢出元素)
- 方法二：在浮动元素下方添加空块元素，并给该元素添加声明：clear:both;height:overflow:hidden;
- (缺点：在结构里增加了空的标签，不利于代码可读性，且降低了浏览器的性能)
- 方法三：万能清除浮动法
- 选择符：after{content“”,clear:both；display:block;height:0;visibility:hidden;/overflow:hidden; }
伪元素：
-
after与content属性一起使用，定义在对象后的内容
如：div:after{content:url(logo.jpg);}
div:after{content:“文本内容”;}
- :before与content属性一起使用,定义在对象前的内容。
- 如：div:before{content“在其前放内容”；}
- ：first-letter:定义对象内第一个字符的样式
- first-line定义对象内第一行文本的样式
两个：：
清浮动
.box::after{ content:""; clear:both; display:block; width:0; height:0; visibility:hidden; }- display:none;不占位隐藏
- visibility:hidden;占位隐藏
窗口自适应：
- 盒子根据窗口进行改变
- 设置方法：html,body{height:100%}
两栏布局
calc（）函数：用于动态计算长度值。
需要注意的是，运算符前后都需要保留一个空格，例如： width:clac(100% - 10px);
任何长度值都可以使用clac（）函数进行计算；
calc（）函数支持 “+”,“-”, “*”, “/”运算；
clac()函数使用了标准的数学运算优先级规则
.box1{ width:200px; height:100%; background:red; float:left; } .box{ width:clac(100% - 200px); height:100%; background:yellow; float:left; }三栏布局
.center{ width:clac(100% - 400px); height:100%; background:blue; float:left; }CSS3基础
1.选择器
<style> /*>子代选择器 空格选亲代*/ .box>li{ } .child+li{ /*当前节点的第一个兄弟3*/ } .child~li{ /*当前节点的所有亲兄弟*/ } </style> <ul class="box"> <li> <ul> <!--子代--> <li>1</li> </ul> </li> <li class="child">2</li> <li >3</li> <li ></li> </ul>2.属性选择器
- E[attr]:只使用属性名，但没有确定任何属性值；
- E[attr=“value”]:指定属性名，并指定了该属性的属性值；
- E[attr=“value”]:指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的不能不写,模糊匹配
- E[attr^=“value”]:指定了属性名，并且有属性值，属性值是以value开头的；
- E[attr$=“value”]:指定了属性名，并且有属性值，而且属性值是以value结束的
- E[attr*=“value”]:指定了属性名，并且有属性值，而且属性值中包含了value；
<style> [class]{ background:yellow; } div[class]{ } div[class=box1]{ } input[name]{ } </style> <div> <div class="box1"> </div> <div class="box2"> </div> <input name="aaa"> </div>3.伪类选择器
（1）结构性伪类选择器
-
X:first-child匹配子集的第一个元素。IE7就可以支持
-
X:last-child匹配父元素中最后一个X元素
-
X:nth-child(n)用于匹配索引值为n 的子元素。索引值从1开始
-
X:only-child这个伪类一般用的比较少，比如上述代码匹配的是div下的有且仅有一个的p，也就是说，如果div内有多个p，将不匹配。
-
X:root匹配文档的根元素。在HTML（标准通用标记语言下的一个应用）中，根元素永远是HTML。
-
X:empty匹配没有任何子元素（包括包含文本）的元素X
（2）目标伪类选择器
- E：target选择匹配E的所有元素，且匹配元素被相关URL指向
（3）UI元素状态伪类选择器
-
E:enabled匹配所有用户界面（form表单）中处于可用状态的E元素
-
E:disabled匹配所有用户界面（form表单）中处于不可选用状态的E元素
-
E:checked匹配所有用户界面（form表单）中处于选中状态的元素E
-
E:selection匹配E元素中被用户选中或处于高亮状态的部分
appearance:none;(去掉默认样式)
（4）否定伪类选择器
- E:not（s）（IE6-8浏览器不支持：not（）选择器。）
- 匹配所有不匹配简单选择符s的元素E
5.动态伪类选择器
-
E:link
链接伪类选择器
选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上
-
E:visited
链接伪类选择器
选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过，常用于链接描点上。
-
E:active
用户行为选择器
选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上
-
E:hover
用户行为选择器
选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a：hover
4.文本阴影
div{ text-shadow: 10px 10px 10px red;(水平位移，垂直位移，模糊程度，颜色 ) }5.盒子阴影box-shadow
-
属性值：
h-shadow 必需的。水平阴影的位置。允许负值 v-shadow 必需的。垂直阴影的位置。允许负值 blur 可选。模糊距离 spread 可选。阴影大小 color 可选。阴影的颜色 inset 可选。从外层的阴影（开始时）改变阴影 内侧阴影 eg：box-shadow:10px 10px 5px #8
8578
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
