CSS层叠样式表
1.CSS概述
CSS(层叠样式表)用于设置和布置网页 - 例如,更改内容的字体,颜色,大小和间距,将其拆分为多个列,或添加动画和其他装饰功能。
2.CSS语法结构
CSS的语法结构仅仅由三部分组成:选择符(Selector)、属性(property)、和值(value)
selector {Property:value;} 注释语法:/*内容*/
3.编写CSS的三种方式
<!-- 1.head中style标签内部直接编写 --> <head> <style> h1{ color:red; } </style> </head> <!-- 2.head中link标签引入外部css文件(最正规) --> <head> <link rel="stylesheet" href="文件.css"> </head> <!-- 3.直接在标签内部通过style属性编写(不推荐方式) --> <body> <h1 style="color:read">内容</h1> </body>
CSS基本选择器
CSS 选择器用于“查找”(或选取)要设置样式的 HTML 元素
/*1.标签选择器:直接编写标签名来查找标签*/ div { color: green; /*查找所有的div标签 并将内部的文本颜色变为绿色*/ } /*2.类选择器:通过编写class的值来查找标签*/ .c1 { color:red; /*查找所有class属性中含有c1的标签 并将内部的文本颜色变为红色*/ } /*3.id选择器:通过编写id的值来精准查找标签*/ #d1 { color: aquamarine; /*查找id值是d1的标签 并将内部的文本颜色改为天青色*/ } /*4.通用选择器:查找所有的标签*/ * { color: blue; /*查找所有的标签 并将内部的文本颜色改为蓝色*/ }
CSS组合选择器
组合器是解释选择器之间关系的某种机制
1.后代选择器 (空格)
后代选择器匹配属于指定元素后代的所有元素。
div span { color:red; } 理解:两个选择器用空格隔开 查找空格前面选择器内部所有符合空格后面选择器要求的标签
2.子选择器 (
>
)子选择器匹配属于指定元素子元素的所有元素
div > p{ color:red; }; 理解:两个选择器之间用大于号隔开 查找符号前面选择器内部第一层符合大于号后面选择器要求的标签
3.相邻选择器 (
+
)相邻选择器匹配所有作为指定元素的相邻同级的元素
div+span { color:red; } 理解:两个选择器用+好隔开 查找符号前标签同级别相邻下面紧挨着的符合符号后面的标签
4.兄弟选择器 (
~
)兄弟(同级)元素必须具有相同的父元素
div~span { color:red; } 理解:两个选择器用~隔开 查询符号左边标签同级别下所有符合符号右边的标签
CSS属性选择器
具有特定属性的HTML元素样式不仅仅是class和id,所有的标签除了有自己默认的属性之外还可以拥有自定义的任意属性,可以通过这些特有的属性来查找特定的标签
/*1.查找属性名含有name的标签*/ [name] { background-color: red; } /*2.查找属性名含有name并且值是username的标签*/ [name='username'] { background-color: orange; } /*3.查找input标签并且 属性名含有name值是username的*/ input[name='username'] { background-color: aqua; } /*前面的选择器可以是任意类型的 标签、id、class*/
CSS选择器之分组与嵌套
当多个选择器查找到的标签需要调整相同的样式 那么可以合并统一设置,并且合并的选择器彼此不干扰和类型的限制
div,p,span { color: red; }
可以在选择器基础之上添加额外的选择使得查找更精确div#d1,.c1,span.a1 { color: red; }
CSS选择器之伪类选择器
a:active 匹配被点击的链接
a:hover 匹配鼠标悬停其上的链接
a:link 匹配所有未被访问的链接
a:visited 匹配所有已经被访问过的链接
<!--鼠标悬浮在链接上链接变红色 --> a:hover { color:red; }; <!--被点击的链接变黄色 --> a:active { color:yellow; }; <!--未被点击过的链接变蓝色 --> a:link { color:blue; }; <!--被访问过的链接变灰色 --> a:visited { color:grey; };
CSS选择器之伪元素选择器
伪元素用于向文本的首行设置特殊样式,伪元素只能用于块级元素
p:first-letter { font-size: 48px; color: red; } p:before { content:"文本1"; color:red; } p:after { content:"文本2"; color:blue; }
CSS选择器优先级
当多个选择器查找到相同的标签修改不同的样式 那么这时候选择器也是有优先级的
1.选择器相同 引入位置不同
就近原则
2.选择器不同的情况
行内 > id选择器 > 类选择器 > 标签选择器
ps:自行查阅强制修改标签样式的操作 !important
body样式设置
1.字体样式
可以设置字体的颜色、大小、字体格式等等....
font-family: "微软雅黑"; } p { font-size: 16px; } p { font-weight:lighter; } p { color:red; color:rgb(); color:#3e3e3e; color:rgba(1,1,1,0.5) } p { text-align:center; } a { text-decoration: none; } p { text-indent: 32px; }
2.背景属性
background背景可以设置下面属性
background-color:背景颜色
background-position:背景图像的位置
background-size:背景图片的尺寸
background-repeat:重复背景图像
background-origin:背景图片的定位区域
background-clip:背景的绘制区域
background-attachment:背景图像是否固定或者随着页面的其余部分滚动
background-image:使用的背景图像
3.边框属性
border-width:规定边框的宽度
border-style :规定边框的样式
border-color :规定边框的颜色
4.display属性(隐藏)
p { display:none; } ps:当值等于none时,可以用来隐藏某个元素,且隐藏的元素不会占用任何空间。
盒子模型
1.什么是盒子模型
HTML的所有标签都可以看成是一个个的盒子,盒子与盒子之间是有一些联系的这些因素又是可以通过代码进行修改的
这些因素有:
边框(border):设置标签的边框
内边距(padding):设置内部文本与边框的距离
2.盒子模型用法
body标签自带有margin并且默认为8px,所以当我们要让body顶边展示的时候得把这默认值改为0
margin-top: 20px; <!--设置上面的外边距--> margin-left: 20px; <!--设置左边的外边距--> margin-right: 20px; <!--设置右边的外边距--> margin-bottom: 20px; <!--设置下面的外边距--> margin:0; <!--将body默认外边距改成0--> margin: 上 右 下 左; <!--margin对应的作用点--> margin: 0px auto; <!--内容水平居中--> padding-top: 20px; <!--设置上面的内边距--> padding-left: 20px; <!--设置左边的内边距--> padding-right: 20px; <!--设置右边的内边距--> padding-bottom: 20px; <!--设置下面的内边距-->
3.盒子模型注意点
padding使用方式与margin一样
简写margin设置四周距离时顺序为:上、右、下、左
margin只能设置水平居中
浮动布局
1.什么是浮动布局
在CSS中任何元素都可以浮动,浮动就是让元素“漂浮”起来从而解决多个快共存于一行的问题,浮动虽然可以解决多个块共存的问题但也会出现一些别的现象如:父类标签坍塌
浮动的特点:
浮动的框可以向左或向右移动,直到框的外边缘碰到包含框或另一个浮动框的边框为止
浮动框会脱离文档流,所以文档流中的块框表现得就像浮动框不存在一样
2.如何使用浮动
float:left <!--向左浮动--> float:right <!--向右浮动--> float:none <!--默认值,不浮动>
>>>当一个元素设置浮动后如果该元素的父元素有一个边框那么父元素的边框会坍塌撑不起来。
.clearfix:after { content:""; display:block; clear:both; } <!--用的最多的伪元素清除法固定套路-->
3.浮动布局注意点
当浮动框下面有被遮住的文本时浏览器会针对文本优先展示(还是能看见文本)
解决父标签坍塌有三种方法:固定高度、伪元素清除法、overflow:hidden
通过clear属性可以规定元素的哪一侧不允许其他浮动元素
溢出属性
1.溢出属性作用
溢出属性设置一个盒子内部的内容如果超出了该盒子设定大小的时候怎么显示超出的内容
2.overflow溢出属性
visible:默认值,超出的内容不会消失而是呈现在元素框之外
scroll:超出内容会被修剪,但是浏览器会显示滚动条以便查看其余内容
auto:如果内容被修剪,超出内容浏览器会以滚动条的形式显示
inherit:规定应该从父元素继承overflow属性的值
定位属性
1.定位属性作用
定位就是设置盒子到指定的位置上
2.定位position属性的用法
static(静态):
relative(相对定位):
相对于标签原来的位置做定位
absolute(绝对定位):
基于已经定位过的父标签做定位(如果没有父标签则以body为参照)
fixed(固定定位):
相对于浏览器窗口做定位