一、属性和属性值的定义
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