CSS也是一种标记语言,主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)。图片的外形(宽高、边框样式、边距等),以及版面的布局和外观显示样式。
CSS规则由两个主要的部分构成:选择器以及一条或多条声明。选择器{属性:值;属性:值}。
css一般在<head>中,以<style></style>包括。
选择器:
标签选择器(元素选择器) 用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。
标签名{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
...
}
类选择器 可以单独选一个或者几个标签
.类名{
属性1:属性值1;
...
}
调用方式为<div class='类名1 类名2 ...'></div>
id选择器
#id名 {
属性1:属性值1;
...
}
调用方式为<div id='id名1 id名2 ...'></div>,id只能调用一次
类选择器在修改样式中用的最多,id选择器一般用于页面唯一性的元素上,经常和Java script搭配使用。
通配符选择器 选取页面中所有元素(标签)
* {
属性1:属性值1;
...
}
复合选择器:
后代选择器:又称包含选择器,可以选择父元素里面子元素。其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签的后代,元素1 元素2 {样式声明},表示选择元素1里面的所有元素2(后代元素),举例如下
ol li a {
color: red;
}
子选择器:只能选择作为某元素的最近一级子元素,元素1>元素2{样式声明},表示选择元素1里面的子一代元素2
并集选择器:选择多组标签,同时为他们定义相同的样式,元素,元素2{样式声明},表示选择元素1和元素2,可与其他选择器共同使用
伪类选择器:向某些选择器添加特殊的效果,比如给链接添加特殊效果或选择第一个和第n个元素,元素1:元素2
链接伪类选择器:
a:link;选择所有未被访问的链接
a:visited;选择所有已被访问的链接
a:hover;选择鼠标指针位于其上的链接
a:active;选择活动链接(鼠标按下未弹起的链接)
链接伪类选择器要按LVHA的顺序声明,否则无效
a链接在浏览器中具有默认样式,所以在实际工作中都需要给链接单独指定样式。
:focus伪类选择器:
用于选取获得焦点的表单元素。焦点就是光标,一般情况下<input>类表单元素才能获取,因此这个选择器也主要针对表单元素来说。
input:focus{
background-color:yellow;
}
字体属性:
font-family: Microsoft yahei';定义字体系列;最常见的几个字体:body{font-family: 'Mircrosoft',tahoma,arial,'Hiragino Sans GB';}上述命令按顺序优先展示
font-size: 20px;定义字体大小,px是一个像素大小单位,标题标签比较特殊,指定<body>时需要单独指定文字大小。
font-weight: 700;定义字体粗细,100-900,400正常,700粗体
font-style: normal/itlic;定义字体风格,normal标准样式,italic斜体
字体属性可以复合body{font: font-style font-variant font-weight font-size/line-height font-family;}顺序不能更改且必须保留font-size和font-family属性,如body{font: 700 16px 'Microsoft yahei';}
文本属性:
color: red;定义文本的颜色,可以用预定义颜色值、rgb()、十六进制,开发中最常用十六进制
text-align: center;设置元素内文本内容的水平对齐方式,left左对齐(默认)、right右对齐、center居中对齐
text-decoration: underline;规定添加到文本的修饰,none无装饰线(默认)、underline下划线、overline上划线、line-through删除线等。
text-indent: 20px/2em;指定文本第一行的缩进,通常是将段落首行缩进,em是相对当前一个文字大小的相对单位
text-height: 26px;用于设置行间距
text-shadow: h-shadow v-shadow blur color;文字阴影,h-shadow必需,水平阴影的 位置,允许负值,v-shadow必需,垂直阴影的位置,允许负值,blur,可选,模糊距离,color可选,阴影的颜色
背景属性:
background-color:颜色值;定义元素的背景颜色,默认是transparent透明
background-image:none/url;描述元素的背景图像,非常便于控制位置
background-repeat:repeat/no-repeat/repeat-x/repeat-y;对背景图像进行平铺,各选项含义依次为 背景图像在横向和纵向上平铺、不平铺、在横向平铺、在纵向平铺。默认是平铺的
background-position:x,y;改变图片在背景中的位置,x,y可以使用方位名(top/center/bottom/left/right等)或精确单位(百分数或者有浮点数字和单位标识符组成的长度值),混合使用时第一个是x,第二个是y
background-attachment:scroll/fix'e'd;设置背景图像是否固定或者随页面的其余部分滚动
background: rgba(0,0,0,0.3);设置背景颜色半透明的效果 ,最后一个参数是alpha透明度,取值范围在零到一之间。
复合写法:background:背景颜色、背景图片地址、背景平铺、背景图像滚动、背景图片位置
盒子模型:
边框:
border : border-width || border-style || border-color;定义边框粗细、样式、颜色
border-width:5px;单位是px
border-style:solid/dashed/dotted;实线、虚线、点线边框
复合写法:border: 1px solid red;没有顺序
可以分开写,如border-top:3px solid red
border-collapse: collapse;相邻边框合在一起
内边距:
padding-left/right/top/button: 20px;设置内边距
复合写法:padding:1px 2px 3px 4px;上右下左;三个值上 左右 下;两个值上下 左右;一个值 全
外边距:
margin-left/right/top/button: 20px;设置外边距,左右外边距设置为auto可以实现水平居中
外边距合并问题可以通过为父元素定义上边框/上内边距或者添加overflow:hidden解决
部分元素会自带内外边距,不同浏览器默认的也不一样,可以通过padding:0;和margin:0;清除内外边距
盒子阴影:
box-shadow: h-shadow v-shadow blur spread color inset;为盒子添加阴影;h-shadow必需,水平阴影的 位置,允许负值,v-shadow必需,垂直阴影的位置,允许负值,blur,可选,模糊距离,spread可选阴影的尺寸,color可选,阴影的颜色,insert可选,将外部阴影改为内部阴影,默认外阴影
圆角边框:
border-radius:length;用于设置元素的外边框圆角,length可以设置为四个值,从左上开始顺时针依次对应,三个值左上 右上左下 右下,两个值 左上 右下和左下 右上;或者以border-top-left-radius:length;形式写,top和left位置不能颠倒
浮动:
选择器 { float: 属性值;};用于创建浮动框,将其移动到一边,直到好的同学们,接下来我们来讲一个非常重要的知识点,叫做普通的特性。因为我们给元素加了之后呢,和以前的默认的元素的排列方式有些不同啊,它具有自己一些单独的。左边缘或右边缘触及包含块或另一个浮动框的边缘,属性值可以是none//left/right
常见的网页布局,列布局用标准流,行布局用浮动
选择器 {clear: 属性值;};清除浮动,属性值是legt/right/both,实际中几乎只用clear: both,清除浮动的策略是闭合浮动,清除浮动的本质就是清除浮动元素脱离标准造成的影响
清除浮动的方法:1.额外标签法,也称隔墙法(W3C推荐)。2.父级添加overflow属性。3.父级添加after伪元素。4.父级添加双伪元素
额外标签法:在浮动元素末尾添加一个空的标签,新添加的空标签必须是块级元素,例如<div style="clear:both"></div><br/>
样式表:
1.行内样式表(行内式)在元素标签内部的style属性中设定CSS样式,适合于修改简单样式。
<div style="color: red;font-size: 12px;"></div>
2.内部样式表(嵌入式)写到HTML页面内部,将所有的CSS代码抽取出来,单独放到一个<style>标签中。
<style>
.blue {
color: red;
width: 500px;
height: 100px;
background-color: blue;
}
</style>
3.外部样式表(链接式)样式单独写到CSS文件中,之后用<link>标签把CSS文件引入到HTML页面中使用,实际开发中最常用。
<link rel="stylesheet" href="css文件路径">
Emmet语法:
1.生成标签,直接输入标签名,按tab键即可。
2.如果想要生成多个相同标签,加上*就可以了,比如div*3。
3.如果有父子级关系的标签,可以用>,比如ul>li
4.如果有兄弟关系的标签,可以用+,比如div+p
5.如果生成带有类名或者ID名字的,直接写.demo或者#two tab键就可以了
6.如果生成的div类名是有顺序的,可以用自增符号$
复合用法:ol>li.demo{中间文字$}*5
display: block/inline-block/inline;行内元素与块级元素的转换
若文字行高等于盒子的高度,就可以让文字在当前盒子内垂直居中
CSS的三大特性:层叠性、继承性、优先性。
层叠性:样式冲突时遵循就近原则,哪个样式离结构近就执行哪个样式。
继承性:子标签会继承父标签的某些样式,如text-、font-、line-
优先性:同一个元素指定多个选择器根据选择器权重执行,相同执行层叠性,选择器权重由大到小为:!important重要的0,1,0,0>行内样式style0,1,0,0="">ID选择器0,0,1,1>类选择器或者伪类选择器0,0,1,0>元素选择器0,0,0,1>继承或者*0,0,0,0,后代选择器存在权重叠加,涉及复合选择器需要计算权重
CSS属性建议书写顺序:
1.布局定位属性: display/position/float/clear/visibility/overflour(建议display第一个写)
2.自身属性:width/height/margin/padding/border/background
3.文本属性:color/font/text-decoration/text-align/vertical-align/white-space/black-word
4.其他属性(CSS3): content/cursor/border-radius/box shadow/text-shadow/background:linear-gradient