1000字范文 > web前端学习day_02:CSS:三种使用方式/选择器/颜色/背景图片/查看样式/文本/元素显示方

web前端学习day_02:CSS:三种使用方式/选择器/颜色/背景图片/查看样式/文本/元素显示方

时间：2020-10-09 10:12:42

CSS : Cascading Style Sheet 层叠样式表. 作用: 美化页面

CSS如何在html页面中添加css样式代码?总共有三种方式:1.选择器2.选择器练习:3.颜色赋值4.背景图片5.如何查看目标页面元素样式(F12)6.文本和字体相关7.元素显示方式display圆角8.盒子模型8.1盒子模型之宽高8.2盒子模型之外边距8.3盒子模型之外边距8.4盒子模型之边框8.5盒子模型之内边距8-盒子模型回顾:9.定位方式:9.1文档流定位(默认)9.2相对定位9.3绝对定位9.4固定定位9.5浮动定位10.行内元素的垂直对齐方式vertical-align11. z-index样式12. overflow溢出设置

CSS

Cascading Style Sheet 层叠样式表. 作用: 美化页面

如何在html页面中添加css样式代码?总共有三种方式:

内联样式: 在标签的style属性中添加css样式代码, 弊端:不能复用内部样式: 在head标签里面添加style标签,标签体内写样式代码,弊端:只能在当前页面复用外部样式: 在单独的css文件中写样式代码,在html页面中通过link标签引入css文件,可以实现多页面复用

工作中外部样式用的最多,学习过程中更多使用内部样式

1.选择器

标签名选择器格式: 标签名{样式代码}作用: 选取页面中所有同名标签 id选择器格式: #id{样式代码}作用: 如果需要给页面中某一个元素添加样式,则给元素添加id属性,通过id选择器选中 class选择器格式: .class{样式代码}作用: 用于选取页面中多个元素(需要给多个元素添加相同的class属性值) 分组选择器格式: div,#id,.class{样式代码}作用: 可以将多个选择器合并成一个选择器属性选择器格式: 标签名[属性名=‘值’]{样式代码}作用: 可以通过元素的属性获取元素子孙后代选择器格式: body div span{样式代码}作用: 选取body里面的div里面的所有span(包括子元素span和所有后代span) 子元素选择器格式: body>div>span{样式代码}作用:选取body里面的div里面的子元素span 伪类选择器格式: 标签名:link/visited/hover/active{样式代码}作用: 选取元素的状态状态包括(未访问状态,访问过状态,悬停状态,点击状态) 任意元素选择器格式: *{样式代码}作用: 选取页面中所有元素

2.选择器练习:

把d1字体改红色把d2,s2,h2,水煮鱼字体改绿色把密码框背景改红色把水煮肉,水煮鱼,红烧肉,d1背景改黄色把h2和文本框背景改蓝色

3.颜色赋值

三原色: 红绿蓝,red green blue, rgb 每个颜色取值范围0-255,颜色单词赋值 red6位16进制赋值 #ff0000 红255 绿0 蓝03位16进制赋值 #f00 每一位重复一次 f00=ff00003位10进制赋值 rgb(255,0,0)4位10进制赋值 rgba(255,0,0,0-1) a=alpha透明度取值0-1 值越小越透明

4.背景图片

background-image:url(路径); 设置背景图片background-size:200px 300px; 设置背景图片尺寸background-repeat:no-repeat; 禁止重复background-position:50% 100%; 背景图片位置

5.如何查看目标页面元素样式(F12)

使用谷歌浏览器在元素上面右键->检查右侧窗口出现后点击小箭头拾取器选中想查看的元素

6.文本和字体相关

文本修饰: text-docoration:overline上划线/underline下划线/line-through删除线/none去掉修饰文本对齐方式: text-align: left/right/center;文本颜色: color:red;文本阴影: text-shadow: 颜色 x偏移值 y偏移值浓度(值越大越模糊)行高: line-height:20px; 可以通过行高实现垂直居中字体大小: font-size:20px;字体加粗: font-weight:bold加粗/normal去掉加粗;字体设置: font-family:xxxx,xxx,xxx,xxxx; font:20px xxx,xxx,xxx;斜体: font-style: italic;

7.元素显示方式display

block: 块级元素 ,独占一行,可以修改宽高, 包括: div h1-h6 pinline: 行内元素, 共占一行,不能修改宽高, 包括: span b i small 超链接等inline-block:行内块元素,共占一行,并且可以修改宽高, 包括: 图片img, input 每个元素都有自己默认的显示方式,但是有些场景需要修改元素的显示方式,比如行内元素是不能修改宽高的如果有需求必须改宽高则只能先修改元素的显示方式为block或inline-block

圆角

border-radius:5px; 值越大越圆当值大于宽高一半时为圆形

8.盒子模型

盒子模型=宽高+外边距+边框+内边距宽高: 控制元素大小外边距: 控制元素的位置边框: 控制边框效果内边距: 控制元素内容的位置

8.1盒子模型之宽高

width/height赋值,赋值方式两种: 像素上级元素百分比行内元素是不能修改宽高的

8.2盒子模型之外边距

外边距:元素距上级元素或相邻兄弟元素的距离称为外边距. 作用: 控制元素的显示位置赋值方式: 单独某个方向赋值 margin-left/right/top/bottom: 10px;四个方向赋值 margin:10px;上下和左右 margin:10px 20px; 上下10 左右20 margin:0 auto; 块级元素居中上右下左四个方向 margin:10px 20px 30px 40px 顺时针上右下左

###CSS的三大特性继承:元素可以继承上级元素的文本和字体相关样式,部分标签自带效果不受继承影响比如:超链接的字体颜色 h1-h6字体大小都不受继承影响层叠:多个选择器有可能选择到同一个元素,给元素添加样式时,如果添加的样式不同则全部层叠生效,如果样式相同则只能生效一个,由优先级决定哪一个生效优先级:作用范围越小优先级越高, id>class>标签名>继承(属于间接选中)

8.3盒子模型之外边距

元素距上级元素或相邻兄弟元素的距离为外边距.用来控制元素的显示位置

margin-left/right/top/bottom:10px; 单独某一个方向赋值

margin:10px 四个方向赋值

margin:10px 20px 上下10 左右20

margin:0 auto: 块级元素居中

margin:10px 20px 30px 40px; 上右下左顺时针左右相邻外边距累加,上下相邻外边距取最大值粘连问题: 当元素的上边缘和上级元素的上边缘重叠时,给元素添加上外边距,会出现粘连问题,通过给上级元素添加overflow:hidden方式解决行内元素上下外边距无效

8.4盒子模型之边框

赋值方式: border: 粗细边框样式颜色; 四个方向添加边框border-left/right/top/bottom: 粗细边框样式颜色; 单独某个方向添加边框圆角: border-radius:5px; 值越大越圆

8.5盒子模型之内边距

什么是内边距: 元素边缘距内容的距离, 用来控制元素内容的位置赋值方式:(类似外边距) padding-left/right/top/bottom: 10px; 单独某个方向赋值padding:10px; 四个方向赋值padding:10px 20px; 上下10 左右20padding:10px 20px 30px 40px; 上右下左如果需要移动元素的子元素位置有两种方式: 给元素添加内边距移动,会影响元素宽高给子元素添加外边距移动,不会影响元素宽高,但是需要考虑粘连问题

8-盒子模型回顾:

宽高width/heigh: 控制元素的显示大小外边距margin:控制元素的显示位置边框border: 控制边框效果内边距padding:控制元素内容的位置

9.定位方式:

9.1文档流定位(默认)

又称为静态定位,元素默认的定位方式为文档流定位格式: position:static;元素显示特点: 块级元素从上往下排列行内元素从左向右排列如何控制元素的显示位置?

通过给元素添加外边距

9.2相对定位

格式: position:relative;元素显示特点: 元素不脱离文档流(不管元素移动到什么位置原来的位置仍然占着)如何控制元素的显示位置?

通过left/right/top/bottom 让元素相对于初始位置做位置偏移.

9.3绝对定位

格式: position:absolute;显示特点: 元素脱离文档流(元素会把之前所占位置让出)如何控制元素的显示位置?

通过left/right/top/bottom 让元素相对于窗口或某一个上级元素做位置偏移(需要给上级元素添加position:relative)

9.4固定定位

当元素需要固定在窗口的某个位置的时候使用固定定位格式: position:fixed;显示特点:元素脱离文档流如何控制元素的显示位置?

通过left/right/top/bottom 让元素相对于窗口做位置偏移

9.5浮动定位

-格式: float:left/right;

显示特点: 元素脱离文档流,元素从当前所在行向左或向右浮动,当撞到上级元素边缘或其它浮动元素停止.当需要将纵向排列的元素改成横向排列时使用浮动定位如果元素的所有子元素全部浮动则自动识别的高度为0,给元素添加overflow:hidden;解决此问题浮动元素受上级元素宽度影响,如果一行装不下会自动换行,换行时有可能被卡主