1.选择器
标签选择器(元素选择器):指用HTML标签名称作为选择器,选择的是一类标签
标签名 {
属性1: 属性值1;
属性2: 属性值2;
...
}
类选择器:单独选择一个或者某几个标签 结构需要用class属性来调用class类
.类名 {
属性1: 属性值1;
...
}
类选择器口诀:样式点定义,结构类(class)调用,一个或多个,开发最常用
一个标签可以有多类名,中间用空格隔开
id选择器:HTML元素以id属性来设置id选择器,CSS中id选择器以“#”来定义
#id名 {
属性1: 属性名1;
...
}
id选择器口诀:样式#定义,结构id调用,只能调用一次,别人切勿使用
通配符选择器:在CSS中,通配符选择器通常用“*”来定义,它表示选取页面中的所有元素(标签)
* {
属性1: 属性值1;
...
}
2.CSS字体属性
font-family:字体类型 1.font-family后可跟多个字体,各种字体之间必须使用英文状态下的逗号隔开 2.一般情况下,如果有空格隔开的多个单词组成的字体,加引号’’ 3.尽量使用系统默认自带字体 4.在多个字体之间,系统会从左至右检查,使用第一个系统存在的字体
font-size:字体大小 1.px(像素)大小是网页中的最常用单位 2.可以给body指定整个页面文字大小 3.标题标签比较特殊,需要单独指定文字大小
font-weight:字体粗细
font-style:文字样式
复合属性,有严格的顺序,不能随意更换顺序,不需要设置的属性可以省略(取默认值,但必须保留font-size和font-family属性,否则font属性将不起作用
font: font-style font-weight font-size/line-height font-family
eg: font: italic 700 16px 'Microsoft yahei'
3.文本属性
文本颜色:color
对齐文本:text-align,设置元素内文本内容的水平对齐方式 1.left(左对齐,默认值) 2.right(右对齐) 3.center(居中对齐)
装饰文本:text-decoration 1.none:默认,没有装饰线(最常用) 2.underline:下划线,链接a自带下划线(常用) 3.overline:上划线(几乎不用) 4.line-through:删除线(不常用) 可以使用none删除a标签的下划线
文本缩进:text-indent 用来指定第一行的缩进,通常是将段落的首行缩进
em是一个相对单位,就是当前元素(font-size)1个字体的大小,如果当前元素没有设置大小,则会按照父元素的1个字体大小
p {
text-indent: 2em;
}
行间距:line-height
4.CSS引入方式
1.行内样式表(行内式) 2.内部样式表(嵌入式) 3.外部样式表(链接式)
所谓内部样式表,就是在html页面内部写样式,但是是单独写到style标签内部
行内样式表,控制当前标签
不想上班
外部样式表:在外部单独写CSS文件,之后把CSS文件引入HTML文件中 rel:定义当前文档与被链接文档之间的关系,在这里需要指定为“stylesheet”,表示被链接的文档是一个样式表文件 href:定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径
5.Emmet语法
快速生成语法
6.CSS的复合选择器
1.后代选择器(重要) 后代选择器又称包含选择器,可以选择父元素里面子元素。
ul li {
color: pink;
}
2.子选择器(重要) 子元素选择器(子选择器)只能选择作为某一元素的最近一级子元素 用法:元素1>元素2 { 样式声明 }
3.并集选择器 元素1,元素2 { 样式声明 }
4.伪类选择器,用“:”表示
链接伪类选择器 1.a:link 选择所有未被访问的链接 2.a:visited 选择所有已被访问的链接 3.a:hover 选择鼠标指针位于其上的链接 4.a:active 选择活动链接(鼠标按下未弹起的链接) 使用注意事项: 1.为了确保生效,请按照LVHA的顺序声明:link visited hover active 因为a链接在浏览器中具有默认样式,所以在实际工作中需要给链接单独指定样式
focus伪类选择器 用于选取获得焦点的表单元素,焦点就是光标 input:focus { 样式 }
7.CSS的元素显示模式
块元素 行内元素
块元素 常见的块元素有
~、
、
- 、
- 等,其中是最典型的块元素 特点 1.比较霸道,自己独占一行 2.高度、宽度、外边距以及内边距都可以控制 3.宽度默认为容器(父级宽度)的100% 4.是一个容器及盒子,里面可以放行内或者块级元素 注意:文字类的元素(
~
等)内不能使用块级元素
行内元素 常见的行内元素有
等,其中标签是最典型的行内元素,有的地方也将行内元素称为内联元素。 特点 1.相邻行内元素都在一行上,一行可以显示多个 2.高、宽直接设置是无效的 3.默认宽度就是它本身内容的宽度 4.行内元素只能容纳文本或其他行内元素 注意:链接内不能再放链接、特殊情况链接里面可以放块级元素,但是给转换一下块级模式最安全行内块元素 在行内元素中有几个特殊的标签——
它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。 特点 1.和相邻行内元素(行内块)在一行上,但是它们之间会有空白缝隙,一行可以显示多个(行内元素特点) 2.默认宽度就是它本身内容的宽度(行内元素特点) 3.宽度、行高、外边距以及内边距都可以控制(块级元素特点) 元素显示模式转换 一个模式的元素需要另外一种模式的特性 1.转换为块元素:display: block; 2.转换为行内元素:display: inline; 3.转换为行内块元素:display: inline-block;
单行文字垂直居中的小技巧 让文字的行高=盒子的高度
8.CSS的背景
背景颜色 background-color:transparent(默认透明色)| 颜色值
背景图片 background-image属性描述了元素的背景图像,实际开发常见于logo或者一些装饰性的小图片或者超大的背景图片,优点是非常便于控制位置(精灵图的一种运用常景) background-image:none | url(url) url:相对地址或绝对地址(/)
背景平铺,默认情况下背景是平铺的 background-repeat: repeat | no-repeat | repeat-x | repeat-y
背景图片位置 background-position: x y; x坐标和y坐标,可以使用方位名词或者精确单位 length: 百分数 | 由浮点数字和单位标识符组成的长度值 position: top | center | bottom | left | right 方位名词 注意 参数是方位名词 1.如果指定的两个值都是方位名词,则两个值前后顺序无关,比如left top 和 top left 效果一致 2.如果只指定了一个方位名词,另一个值省略,则第二个值默认居中对齐 参数是精确单位 1.如果参数值是精确坐标,那么第一个肯定是x坐标,第二个一定是y坐标 2.如果只指定一个数值,那该数值一定是x坐标,另一个默认垂直居中 参数是混合单位 如果指定的两个值是精确单位和方位名词混合,则第一个值是x坐标,第二个值是y坐标
背景图像固定(背景附着) background-attachment属性设置背景图像是否固定或者随着页面的其它部分滚动 background-attachment: scroll(滚动,默认)| fixed(固定)
背景复合写法 当使用简写属性时,没有特定的书写顺序,一般习惯约定顺序为: background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
背景颜色半透明 background: rgba(0, 0, 0, 0.3); 最后一个参数a就是alpha透明度,取值范围在0~1之间 可以将0.3的 0 省略掉,写成 background: rgba(0, 0, 0, .3); 如果在里面添加文字,文字不会受影响,即盒子里面的内容不受影响
9.CSS三大特性
层叠性 相同的选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式。解决样式冲突的问题 层叠式原则: 1.样式冲突,遵循的原则是就近原则,哪个样式离结构近,就执行哪个样式 2.样式不冲突,不会层叠
继承性 子标签会继承父标签的某些样式,如文本颜色和字号。子承父业。 子元素可以继承父元素的样式(text-, font-, line-这些元素开头的可以继承,以及color属性) 行高的继承 行高可以跟单位也可以不跟单位
body {
color: pink;
font: 12px/1.5 'Microsoft YaHei';
}
div {
/* 子元素继承了父元素body的行高1.5 */
/* 这个1.5就是当前元素文字大小的font-size的1.5倍 即行高为21 */
font-size: 14px;
}
不想上班不想上班优先级 当同一个元素指定多个选择器,就会有优先级的产生 1.选择器的相同,则执行层叠性 2.选择器不同,则根据选择器权重执行
选择器选择器权重继承 或者 *0,0,0,0元素选择器0,0,0,1类选择器,伪类选择器0,0,1,0ID选择器0,1,0,0行内样式style=“”1,0,0,0!important 重要的无穷大
优先级注意点 1.权重是有4组数字组成的的,但是不会有进位 2.可以理解为类选择器永远大于元素选择器,id选择器永远大于类选择器,以此类推 3.等级判断从左至右,如果某一位数字相同,则判断下一位数值。 4.继承的权重是0
权重叠加
/* 复合选择器会有权重叠加的问题 */
/* ul li 权重 0,0,0,1 + 0,0,0,1 = 0,0,0,2 */
ul li {
color: aqua;
}
li {
color: red;
}
/* 权重 0,0,1,0 + 0,0,0,1 = 0,0,1,1 */
.nav li {
color: yellow;
}
10.盒子模型
盒子模型(Box Model)的组成 包括边框、外边距、内边距、实际内容 border边框、content内容、padding内边距、margin外边距
边框(border) 组成:边框宽度(粗细)、边框样式、边框颜色 border: border-width || border-style || border-color
属性作用border-width定义边框粗细,单位是pxborder-style边框的样式 solid(实线边框) dashed(虚线边框) dotted(点线边框)border-color边框颜色
边框复合写法 没有顺序
边框分开写法 border-top: 1px solid red 只设定上边框,其余同理
表格的粗细边框 border-collapse属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框 border-collapse: collapse合并相邻的边框
边框会影响盒子实际大小
内边距(padding) 控制盒子内容与盒子边框的距离 padding-left/top/bottom/right padding简写属性
值的个数表达意思padding: 5px1个值,代表上下左右都有5像素内边距padding: 5px 10px2个值,代表上下内边距是5像素,左右内边距是10像素padding: 5px 10px 20px3个值,代表上内边距5像素,左右内边距10像素,下内边距是20像素padding: 5px 10px 20px 30px4个值,上是5 右10 下20 左30
给盒子指定padding值后,发生了两件事情 1.内容和边框有了距离,添加了内边距 2.padding影响了盒子的实际大小 如果盒子本身没有指定width/height属性,则此时padding不会撑开盒子大小
外边距(margin) 控制盒子与盒子之间的距离 margin-left/right/top/bottom 外边距的简写与内边距一样
外边距典型应用 外边距可以让块级盒子水平居中,但是必须满足两个条件 1.盒子必须指定了宽度(width) 2.盒子左右的外边距都设置为auto 以上方法是让块级元素水平居中,行内元素或者行内块元素水平居中给其父元素添加text-align:center
外边距合并 使用margin定义块级元素的垂直外边距时,可能会出现外边距的合并 主要有两种情况: 1.相邻块元素垂直外边距的合并 2.嵌套块元素垂直外边距的塌陷
相邻块元素垂直外边距的合并 当上下相邻的两个块元素(兄弟关系)相遇时,如果上面的元素右下外边距margin-bottom,下面的元素右上外边距margin-top,则它们之间的垂直间距不是margin-bottom与margin-top之和,而是取两个值中的较大者,这种现象被称为相邻块元素垂直外边距的合并 解决方案:尽量给一个盒子添加外边距
嵌套块元素垂直外边距的塌陷 对于嵌套关系(父子关系)的块元素,父元素有上外边距同时子元素也有上外边距,此时父元素会塌陷较大的外边距值 解决方案 1.可以为父元素定义上边框 2.可以为父元素定义内边距 3.可以为父元素添加overflow:hidden 浮动、固定、绝对定位和盒子不会出现塌陷问题
清除内外边距 在布局前,首先清除下网页元素的内外边距
* {
margin: 0;
padding: 0;
}
行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下内外边距,但是转换为块级和行内块元素就可以了。
去掉li前面的 项目符号(小圆点) list-style: none;
11.圆角边框(重点)
border-radius属性用于设置元素的外边框圆角 border-radius: length; 参数值可以是百分比也可以是像素值,例如盒子是正方形,参数为50%就是宽度和高度的一半
Document .yuanxing {
width: 200px;
height: 200px;
background-color: pink;
border-radius: 50%;
}
.juxing {
width: 300px;
height: 100px;
background-color: pink;
border-radius: 50px;
}
.radius {
width: 200px;
height: 200px;
/* 左上角 右上角 右下角 左下角(顺时针) */
border-radius: 10px 20px 30px 40px;
/* 如果是只有两个值,则为正对角线和反对角线 */
/* border-radius: 10px 40px; */
/* 也可以分别设置 */
/* border-top-left-radius border-top-right-radius
border-bottom-left-radius border-bottom-right-radius */
background-color: pink;
}
1.圆形的做法
2.圆角矩形的做法
3.可以设置不同的圆角
12.盒子阴影
box-shadow box-shadow: h-shadow v-shadow blur spread color inset;
值描述h-shadow必需。水平阴影的位置。允许为负值v-shadow必需。垂直阴影的位置。允许为负值blur可选。模糊距离spread可选。阴影的尺寸尺寸color可选。阴影的颜色inset可选。将外部阴影(outset)改为内部阴影
1.默认的是外阴影(outset),但是不可以写这个单词,否则阴影无效 2.盒子阴影不占用空间,不会影响其它盒子排列
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
/* box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3); */
}
/* 原先盒子没有影子,当我们鼠标经过盒子就添加阴影 */
/* 任何盒子都可以hover */
div:hover {
box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3);
}
13.文字阴影
text-shadow text-shadow: h-shadow v-shadow blur color;
14.常见网页布局
普通流(标准流)、浮动、定位
标准流:所谓的标准流,就是标签按照规定好默认方式排列。
块级元素会独占一行,从上向下顺序排列。 常用元素:div、hr、p、h1~h6、ul、ol、dl、form、table行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘则自动换行。 常用元素:span、a、i、em 等
浮动 浮动最典型的应用:可以让多个块级元素一行内排列显示。 网页布局第一准则:多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动。 float 属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘。 语法:选择器 { float: 属性值; }
属性值描述none元素不浮动(默认值)left元素向左浮动right元素向右浮动
浮动特性 1.1 脱离标准普通流的控制(浮) 移动到指定位置(动), (俗称脱标) 1.2 浮动的盒子不再保留原先的位置 2.1 如果多个盒子都设置了浮动,则它们会按照属性值一行内显示并且顶端对齐排列。 2.2 浮动的元素是互相贴靠在一起的(不会有缝隙),如果父级宽度装不下这些浮动的盒子, 多出的盒子会另起一行对齐。 3. 浮动元素会具有行内块元素特性。 任何元素都可以浮动。不管原先是什么模式的元素,添加浮动之后具有行内块元素相似的特性。
如果块级盒子没有设置宽度,默认宽度和父级一样宽,但是添加浮动后,它的大小根据内容来决定浮动的盒子中间是没有缝隙的,是紧挨着一起的行内元素同理
浮动布局注意点 1.浮动与标准流的父盒子相搭配 先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置 2.一个元素浮动了,理论上其余的兄弟元素也要浮动。 一个盒子里面有多个子盒子,如果其中一个盒子浮动了,那么其他兄弟也应该浮 动,以防止引起问题。 浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流。
为什么清除浮动 由于父级盒子很多情况下,不方便给高度,但是子盒子浮动又不占有位置,最后 父级盒子高度为 0 时,就会影响下面的标准流盒子。 由于浮动元素不再占用原文档流的位置,所以它会对后面的元素排版产生影响 清除浮动的本质: 1.清除浮动的本质是清除浮动元素造成的影响 2.如果父盒子本身有高度,则不需要清除浮动 3.清除浮动之后,父级就会根据浮动的子盒子自动检测高度。父级有了高度,就不会影响下面的标准流了 语法:选择器 { clear: 属性值; }
属性值描述both同时清除左右两侧浮动的影响left不允许左侧有浮动元素(清除左侧浮动的影响)right不允许右侧有浮动元素(清除右侧浮动的影响)
清除浮动方法 1.额外标签法也称为隔墙法,是W3C推荐的做法 额外标签法会在浮动元素末尾添加一个空的标签。例如
,或者其他标签(如
等)。(要求这个新的空标签必须是块级元素) 2.父级添加overflow属性 可以给父级添加 overflow 属性,将其属性值设置为 hidden、 auto 或 scroll 3.父级添加 :after伪元素,直接复制调用即可.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { /* IE6、7 专有 */
*zoom: 1;
}
4.父级添加双伪元素
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
CSS属性书写顺序 建议遵循以下顺序:
布局定位属性:display / position / float / clear / visibility / overflow(建议 display 第一个写,毕竟关系到模式)自身属性:width / height / margin / padding / border / background文本属性:color / font / text-decoration / text-align / vertical-align / white- space / break-word其他属性(CSS3):content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …
导航栏注意点: 实际开发中,我们不会直接用链接a 而是用 li 包含链接(li+a)的做法。
li+a 语义更清晰,一看这就是有条理的列表型内容。如果直接用a,搜索引擎容易辨别为有堆砌关键字嫌疑(故意堆砌关键字容易被搜索引擎有降权的风险),从而影响网站排名
注意:
让导航栏一行显示, 给 li 加浮动, 因为 li 是块级元素, 需要一行显示.这个nav导航栏可以不给宽度,将来可以继续添加其余文字因为导航栏里面文字不一样多,所以最好给链接 a 左右padding 撑开盒子,而不是指定宽度
定位 浮动可以让多个块级盒子一行没有缝隙排列显示,经常用于横向排列盒子 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子
定位组成 定位:将盒子定在某一个位置,所以定位也是在摆放盒子,按照定位的方式移动盒子 定位=定位模式+边偏移 定位模式用于指定一个元素在文档中的定位方式,边偏移则决定了该元素的最终位置
1.定位模式 通过CSS的position属性来设置
值语义static静态定位relative相对定位absolute绝对定位fixed固定定位
2.边偏移 定位的盒子移动到的最终位置 top、bottom、left、right
边偏移属性示例描述toptop:80px顶端偏移量,定义元素相对于其父元素上边线的距离bottombottom:80px底部偏移量,定义元素相对于其父元素下边线的距离leftleft:80px左侧偏移量,定义元素相对于其父元素左边线的距离rightright:80px右侧偏移量,定义元素相对于其父元素右边线的距离
静态定位static(了解) 静态定位是元素的默认定位方式,无定位的意思 语法:选择器 {position: static;} 静态定位按照标准流特性摆放位置,它没有边偏移
相对定位relative(重要) 相对定位是元素在移动位置的时候,是相对于它原来的位置来说的 语法:选择器 {position: relative;} 特点: 1.它是相对于自己原来的位置来移动的(移动位置的时候参照点是自己原来的位置) 2.原来在标准流的位置继续占有,后面的盒子仍然以标准流的方式对待它(不脱标,继续保留原来的位置)
绝对定位absolute(重要) 绝对定位是元素在移动位置时,是相对于它祖先元素来说的 语法:选择器 {absolute: relative;} 特点: 1.如果没有祖先元素或者祖先元素没有定位,则以浏览器为准定位(Document文档) 2.如果祖父元素有定位(相对、绝对、固定定位),则以最近一级有定位祖先元素为参考点移动位置 3.绝对定位不再占有原先的位置(脱标)
绝对定位和相对定位使用场景(子绝父相:子级是绝对定位的话,父盒子要用相对定位) 1.子级绝对定位,不会占有位置,可以放到父盒子里面的任何一个地方,不会影响其他的兄弟盒子 2.父盒子需要加定位限制子盒子在父盒子内显示 相对定位经常用作绝对定位的父级 因为父级需要占有位置,因此是相对定位,子盒子不需要占有位置,所以是绝对定位
固定定位fixe(重要) 固定定位是元素固定于浏览器可视区的位置。主要使用场景:可以在浏览器页面滚动时元素的位置不会改变 语法:选择器 {position: fixed;} 特点: 1.以浏览器的可视窗口为参照点移动元素。 跟父元素没有任何关系 不会随着滚动条的滚动而滚动 2.固定定位不再占有原先的位置 固定定位也是脱标的,其实固定定位也可以看作是一种特殊的绝对定位
粘性定位sticky(了解) 相对定位与固定定位的混合 语法:选择器 {position: sticky; top: 10px;} 特点: 1.以浏览器的可视窗口为参照物点移动元素(固定定位特点) 2.粘性定位占有原先的位置(相对定位特点) 3.必须添加top、bottom、left、right其中一个才有效
定位叠放次序 z-index 在使用定位布局时,可能会出现盒子重叠的情况,此时,可以使用z-index来控制盒子的前后次序(z轴) 语法:选择器 {z-index: 1;} 数值可以是正整数、负整数或0,默认是auto,数值越大,盒子越靠上 如果属性值相同,则按照书写顺序,后来居上 数字后面不能加单位 只有定位的盒子才有z-index属性
绝对定位的盒子居中 加了绝对定位的盒子不能通过margin: 0 auto水平居中,但是可以通过以下计算方法实现水平(垂直居中) 1.left设置为50%(top设置50%) 2.margin-left设置为负自身宽度的一半:让盒子向左移动自身宽度的一半(margin-top设置为负自身高度的一半:让盒子向上移动自身宽度的一半)
定位特殊特性 绝对定位和固定定位也和浮动类似 1.行内元素添加绝对或者固定定位,可以直接设置高度和宽度 2.块级元素添加绝对定位或者固定定位,如果不给宽度或者高度,默认大小是内容的大小 脱标的盒子不会触发外边距塌陷 浮动元素、绝对定位(固定定位)元素都不会触发外边距合并的问题
绝对定位(固定定位)会完全压住盒子 浮动元素不同,只会压住它下面标准流的盒子,但是不会压住下面标准流盒子里面的文字(图片) 但是绝对定位(固定定位)会压住下面标准流的所有内容 浮动之所以不会压住文字,因为浮动产生的目的最初是为了做文字环绕效果的,文字会围绕浮动元素
元素的显示与隐藏 display显示隐藏 visibility显示隐藏 overflow溢出显示隐藏
display display: none; 隐藏对象 display: block; 除了转换为块级元素外,同时还有显示元素的意思 display隐藏元素后,不再占有原来的位置。
visibility可见性 visibility: visible; 元素可视 visibility: hidden; 元素隐藏 visibility隐藏元素后,继续保留原来的位置
overflow溢出 overflow属性指定了如果内容溢出一个元素的框(超过其宽度或高度时发生什么) overflow: visible; 溢出内容显示 overflow: hidden; 溢出内容隐藏 overflow: scroll; 溢出的部分显示滚动条,不溢出也显示滚动条 overflow: auto; 溢出的时候才显示滚动条,不溢出不显示滚动条
文章链接
评论可见,请评论后查看内容,谢谢!!!本文由 用户 于 2024-04-20 发布在 金钥匙,如有疑问,请联系我们。
本文链接:https://www.51969.com/post/18781022.html
- 、
发表评论