CSS概述
CSS(层叠样式表):在网页制作时采用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
CSS书写规则
1.选择器通常是需要改变样式的HTML 元素
2.声明组以大括号({})括起来
3.每条声明都由一个属性和一个值组成
4.CSS声明总是以分号(;)结束
CSS三大特性
1.继承性:子元素有默认继承父元素样式的效果
2.层叠性:给同一个标签设置了相同的属性,此时样式会覆盖,最后写在下面的会生效;给同一个标签设置了不同的样式,此时样式会叠加,最后会共同作用在标签上
3.优先级:标签选择器有优先级,继承<通配符选择器<标签选择器<类选择器<id选择器<!important(!important写在属性值的后面,分号的前面,!important不能提升继承的优先级,只要是继承,优先级最低。)
CSS引入方式
样式优先级:行内样式>内嵌样式>外联样式 ——就近原则
1.内嵌样式:css写在style标签中,style标签写在head标签里,title标签的下面
<style type="text/css">
样式
</style>
2.外联样式:css写在一个单独的xxx.css文件中,此时需要通过link标签引入
<link rel="stylesheet" type="text/css" href=" "/>
3.行内样式:css写在标签的style属性中
<p style=" ">xxx</p>
CSS基础选择器
选择器的作用:选中页面中对应的标签,才能设置它的样式
css选择器优先级:id选择器>类选择器>标签选择器
1.标签选择器:通过标签名找到页面中所有这一类标签设置样式,找的是一类标签,不能单独找到某一个,标签选择器无论嵌套关系有多深,都能找到对应的标签。
2.类(class)选择器:找到页面中所有带有该类名的标签设置样式,所有标签都有class标签,class属性的属性值就叫类名,一个标签可以有多个类名,类名之间通过空格隔开,一个类选择器可以同时选中多个标签。
3.id选择器:找到页面中带有该id属性值的标签设置样式,id属性值相当于是身份证号码,在一个页面中是唯一的,不可重复的,一个标签上只能有一个id属性值,一个id选择器只能选中一个标签。
4.通配符选择器(*):找到页面中的所有标签
选择器进阶
1.复合选择器:
(1)后代选择器,结构:选择器1 选择器2 {css},先通过选择器1找到一堆标签,再一堆标签的后代(儿子、孙子、重孙子......)中找到满足选择器2的标签,设置样式
(2)子代选择器,结构:选择器1>选择器2 {css},先通过选择器1找到一堆标签,再一堆标签的子代(儿子)中找到满足选择器2的标签,设置样式
2.并集选择器,结构:选择器1,选择器2 {css},找到选择器1和选择器2中所有对应的标签设置样式
3.交集选择器,结构:选择器1选择器2 {css},找到页面中既满足选择器1又满足选择器2的标签设置样式,多个选择器中间不能有空格,如果交集选择器中有标签选择器,此时标签选择器必须写在第一个。
4.hover伪类选择器:鼠标悬停的状态,书写顺序不可以改变!
(1)单击访问前 link:格式:a:link{}; link可以省略;
(2)单击访问后 visited:格式:a:visited{}; 可以改变颜色,其他功能被限制;
(3)鼠标悬浮其上 hover:格式:a:hover{}; 使用多;
(4)单击未释放 active:格式:a:active{}; 使用少,无意义;
字体样式
(1)font-size:设置字体大小,取值:数字+px
(2)font-weight:设置字体粗细,取值:normal(正常)、bold(加粗)、纯数字400(正常)、700(加粗)
(3)font-style:字体样式,取值:normal(正常)、italic(倾斜)
(4)font-family:设置字体类型,取值:黑体、宋体、楷体等
文本样式
(1)text-indent:文本缩进,取值:数字+px、数字+em(1em=当前font-size的大小)
(2)text-align:文本水平对齐方式,取值:left(左对齐)、center(居中对齐)、right(右对齐)
(3)text-decoration:文本修饰,取值:underline(下划线)、line-through(删除线)、none(没有效果,也可以用来清除a标签默认的下划线)、overline(上划线)
(4)line-height:设置行高,取值:数字+px、倍数(当前文字大小的倍数)
(5)color:设置颜色,取值:RGB表示法、RGBA表示法、十六进制表示法、red、yellow等
背景样式
(1)background-color:背景颜色,取值:RGB表示法、RGBA表示法、十六进制表示法、red等
(2)background-image:背景图片,取值:url(图片的路径)
(3)background-repeat:背景平铺,取值:repeat(平铺)、no-repeat(不平铺)、repeat-x(沿着水平方向平铺)、repeat-y(沿着垂直方向平铺)
(4)background-position:背景位置,取值:west等方位名词、数字+px(坐标,坐标原点为盒子左上角)
元素显示模式
(1)display:block,块级元素,独占一行,宽度默认占满一行,高度默认由内容撑开,可以设置宽高。
(2)display:inline,行内元素,一行可以显示多个,宽度和高度默认都是内容撑开,不可以设置宽高。
(3)display:inline-block:行内块元素,一行可以显示多个,可以设置宽高。
盒子模型
1.content 内容设置,width和height默认设置的是内容部分的宽高
2.border 边框设置,属性连写 border:width style color ,单方向属性设置,border-方位名词(top、right、bottom、left):width style color
(1)border-style:边框的样式,取值:solid(实线)、dashed(虚线)、dotted(点线)
(2)border-width:边框的粗细
(3)border-color:边框的颜色
3.padding 内边距设置,控制边框与内容之间的距离,单方向属性设置,padding-方位名词
4.margin 外边距设置,控制边框外盒子与盒子之间的距离,单方向属性设置,margin-方位名词
对于行内元素,水平方向的margin和padding布局有效果,垂直方向的布局是无效的!
网页标准流
又称网页文档流,是浏览器在渲染显示网页内容时默认采用的一套排版规则,规定了应该以何种方式排列元素。
常见排版规则:
1.块级元素:从上往下,垂直布局,独占一行。
2.行内元素和行内块元素:从左往右,水平布局,空间不够自动折行。
CSS浮动
float:浮动属性,取值:left(左浮动)、right(右浮动)
1.浮动的特点:
(1)浮动的元素会脱离标准流,相当于飘到了空中,在标准流中就不占位置
(2)浮动的元素比标准流高出半个级别,可以覆盖标准流中的元素
(3)浮动找浮动,下一个浮动元素会在上一个浮动元素后面左右浮动
(4)浮动的元素有特殊的显示效果,一行可以显示多个,可以设置宽高
(5)浮动会受到上面元素边界的影响
(6)浮动的元素不能通过 text-align:center 或者 margin:0 auto 让浮动的元素水平居中
2.清除浮动带来的影响(影响:如果子元素浮动,此时子元素不能撑开标准流的块级父元素)
(1)直接设置父元素的高度
(2)额外标签法,在父元素的最后添加一个块级元素,给添加的块级元素设置清除浮动的核心代码:clear:both,缺点是会在页面中添加额外的标签,会让页面的HTML结构变得复杂。
(3)单伪元素消除法:用伪元素替代了额外标签
.clearfix::after {
content: '';
display: block;
clear: both;
}
(4)双伪元素清除法:
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
(5)给父元素设置一个属性 overflow:hidden
3.clear:clear属性规定了在元素哪一侧不允许有浮动,取值:none(默认值,允许浮动元素出现在两侧)、left(在左侧不允许浮动元素出现)、right(在右侧不允许浮动元素出现)、both(在左右两侧都不允许浮动元素出现)
CSS定位
(1)position:static
静态定位,标准流中的元素默认就是静态定位,不能配合方位属性实现移动。
(2)position:relative
相对定位,需要配合方位属性实现移动;相对于自己原来的位置进行移动;还占位置,没有脱离标准流。
(3)position:absolute
绝对定位,需要配合方位属性实现移动;如果祖先元素中没有定位,此时相对于浏览器可视区进行移动,如果祖先元素中有定位元素,此时相对于最近有定位的祖先元素进行移动;不占位置,已经脱离了标准流,宽度默认由内容撑开
(4)position:fixed
固定定位,需要配合方位属性实现移动;永远相对于浏览器进行移动;不占位置,已经脱离了标准流,宽度默认由内容撑开
元素的层级关系
标准流元素<浮动元素<定位元素,如果是同种元素,在html结构中写在下面的,层级更高
z-index:z-index属性可以设置定位元素的层级,取值:数字,数字越大,层级越高
装饰
(1)vertical-align:垂直对齐方式,取值:baseline(基线对齐)、top(顶部对齐)、middle(中部对齐)、bottom(底部对齐),注意点:给行内元素或者行内块元素设置
(2)cursor:设置光标类型,取值:default(默认箭头)、pointer(小手,用户可以点击)、text(工字型,用于选择文本)、move(十字光标,用户可以拖拽)
(3)border-radius:设置边框圆角,取值:数字或者百分数
(4)overflow:设置内容超出部分的显示效果,取值:visible(超出部分可见)、hidden(超出部分隐藏)、scroll(显示滚动条)、auto(自动根据内容的多少显示或者隐藏滚动条)
(5)visibility:hidden 元素本身的隐藏属性,虽然隐藏但还占位置
displa:none 元素隐藏并且不然位置了,相当于消除了
(6)opacity:元素整体透明度,取值0~1(0是完全透明,1完全不透明)