web前端基础知识-(b) CSS基础任务

顺晟科技

2021-08-19 11:30:34

230

1. 概述

css是英文Cascading Style Sheets的缩写,称为层叠样式表，用于对页面进行美化。

存在方式有三种：元素内联、页面嵌入和外部引入，比较三种方式的优缺点。

语法：style = \'key1:value1;key2:value2;\'

行内式：

在标签中使用 style=\'xx:xxx;\'单独加在某个标签上，style增加其他属性需要以分号分隔；

1 2 <div style="height: 100px;width:100px">我是div</div>

嵌入式：

在页面中嵌入 < style type="text/css"> </style >块

1 2 3 4 5 6 7 8 9 10 11 <head><meta charset="UTF-8"><title>Title</title><style>div{background-color:darkgrey;height: 100px;width:100px;}</style></head>

链接式：

将.css文件引入到HTML文件中，创建一个.css文件，将css文件放入link标签中

1 2 3 4 5 <head><meta charset="UTF-8"><title>Title</title><link href="mystyle.css" rel="stylesheet" type="text/css"/></head>

导入式：

将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>标记也是写在<head>标记中

1 2 3 4 5 6 7 <head><meta charset="UTF-8"><title>Title</title><style type="text/css">@import"mystyle.css"; #此处要注意.css文件的路径</style></head>

注意：import 会先解析页面所有信息，先不会渲染页面，等待所有信息加载后再渲染页面，如果加载慢会出现无渲染页面，导致用户体验不好，推荐使用嵌入式和链接式

2. CSS选择器

2.1 基础选择器

2.1.1 通用元素选择器

通用元素选择器，匹配任何元素

1 2 3 *{color: darkgrey;}

2.1.2 标签选择器

匹配所有使用XX标签的元素；

例如，需要选择所有标签为div的元素设置样式

1 2 3 4 div{color: grey;background-color: antiquewhite;}

2.1.3 class选择器

.info 或E.info ：class属性选择器，匹配所有class属性中包含info的元素，class属性可以重复，即多个class属性相同的元素；

1 2 3 4 5 6 7 8 9 .cs1{color: grey;background-color: antiquewhite;}<div class="cs1">我是div1标签</div><div class="cs1">我是div2标签</div><p class="cs1">我是p标签</p> 

2.1.4 id选择器

#info或E#info :id属性选择器，匹配所有id属性等于info的元素

1 2 3 4 5 6 7 8 #cs1{color: grey;background-color: antiquewhite;}<div id="cs1">我是div1标签</div><div class="cs1">我是div2标签</div> 

2.2 组合选择器

2.2.1 多元素选择器

E,F：多元素选择器，同时匹配所有E标签元素或F标签元素，E和F之间用逗号分隔

1 2 3 4 5 6 7 8 9 div,p{color: grey;background-color: antiquewhite;}<div id="cs1">我是div1标签</div><p class="cs1">我是p标签</p><span>我是span</span> 

2.2.2 后代元素选择器

E F：后代元素选择器，匹配所有属于E标签元素后代的F标签元素，即所有类似形式的所有后代，子子孙孙，E和F之间用空格分隔;

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 div p{color: grey;background-color: antiquewhite;}<div id="cs1">　　<p class="cs1">我是p1标签</p>　　<div class="cs3">　　　　<p class="cs1">我是p2标签</p>　　　　<div class="cs2">　　　　　　<p id="cs1">我是p3标签</p>　　　　</div>　　</div></div> 

2.2.3 子元素选择器

E > F ：子元素选择器，匹配所有E元素的子元素F，只匹配到子元素，子元素的子元素匹配不到;

1 2 3 4 5 6 7 8 9 10 11 12 13 <style>#outer>.c1{color: aqua;}</style><div id="outer"> <p class="c1">p1.....</p> <div class="c2"> <p class="c1">p2....</p> </div></div> 

2.2.4 毗邻元素选择器

E + F:毗邻元素选择器，匹配所有紧随E元素之后的同级元素F ，即只匹配挨着的下一个F元素，如不相邻也不起作用;

1 2 3 4 5 6 7 8 9 10 11 12 <style>#outer+.c1{color: aqua;}</style><p class="c1">p1....</p><div id="outer"></div><p class="c1">p2.....</p><div class="c1">div1...</div> 

2.3 属性选择器

根据属性进行筛选匹配，只有个input标签匹配上对应的样式

1 2 3 4 5 6 7 8 9 10 11 12 <head> <meta charset="UTF-8"> <title>Title</title> <style> input[name="James"]{width: 20px;height: 20px;} </style></head><body> <input type="text" name="James"> <input type="text"> <input type="password"></body>

3. 常用属性

3.1 颜色属性

color：

①英文单词形式，例如：red，yellow

②编码形式，例如：#cc3399，如双重可简写#c39

③基调颜色透明度设置，例如：rgb（255,255,255,0.5），red、green、blue三色透明度设置,最后一个值设置透明度

3.2 字体属性

font-size: 20px/50%/larger 设置字体大小；

font-family:\'Lucida Bright\' 文本的字体系列；

font-weight: lighter/bold/border/ 字体的粗细；

font-style:normal/oblique/italic 文本的字体样式；

3.3 背景属性

background-color: 背景底色；

background-image: 背景图片；

background-repeat：平铺方式，no-repeat 不平铺，repeat 平铺满；

background-size: 图片大小设置，auto；

background-position：center 上下左右居中；left center左侧上下居中；top，bottom，right类似；

3.4 文本属性

text-align：center 文本居中

line-height：xxpx；行高，针对文本处理

width：xxpx；宽 %50

height：xxpx；高 %50

text-indent：xxpx 首行缩进，基于父元素

letter-spacing：xxpx；字母与字母之间距离

word-spacing：xxpx ；单词之间距离

direction：rt1

text-transform：capitalize；将单词首字母大写

min-height:设置默认最小高度

height：auto！important 以此样式为准

vertical-align：xxpx;垂直居中

opacity：0.3 透明度

3.5 CSS样式边框

border-style：solid；边框样式

border-color：red；边框颜色

border-width：1px；边框宽度

border-radius：20%；边框变成圆角

border

在一个声明中设置所有的边框属性。

border-bottom

在一个声明中设置所有的下边框属性。

border-bottom-color

设置下边框的颜色。

border-bottom-style

设置下边框的样式。

border-bottom-width

设置下边框的宽度。

border-color

设置四条边框的颜色。

border-left

在一个声明中设置所有的左边框属性。

border-left-color

设置左边框的颜色。

border-left-style

设置左边框的样式。

border-left-width

设置左边框的宽度。

border-right

在一个声明中设置所有的右边框属性。

border-right-color

设置右边框的颜色。

border-right-style

设置右边框的样式。

border-right-width

设置右边框的宽度。

border-style

设置四条边框的样式。

border-top

在一个声明中设置所有的上边框属性。

border-top-color

设置上边框的颜色。

border-top-style

设置上边框的样式。

border-top-width

设置上边框的宽度。

border-width

设置四条边框的宽度。

outline

在一个声明中设置所有的轮廓属性。

outline-color

设置轮廓的颜色。

outline-style

设置轮廓的样式。

outline-width

设置轮廓的宽度。

border-bottom-left-radius

定义边框左下角的形状。

border-bottom-right-radius

定义边框右下角的形状。

border-image

简写属性，设置所有 border-image-* 属性。

border-image-outset

规定边框图像区域超出边框的量。

border-image-repeat

图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。

border-image-slice

规定图像边框的向内偏移。

border-image-source

规定用作边框的图片。

border-image-width

规定图片边框的宽度。

border-radius

简写属性，设置所有四个 border-*-radius属性。

border-top-left-radius

定义边框左上角的形状。

border-top-right-radius

定义边框右下角的形状。

box-decoration-break

box-shadow

向方框添加一个或多个阴影。

简写方式：

1 border: solid 1px red

3.6 CSS样式浮动

正常文档流：将元素（标签）在进行排版布局时按照从上到下、从左到右的顺序分布排版的流；

脱离文档流：将元素从文档流中取出，进行覆盖，其他元素会按文档流中不存在该元素重新布局；

float 浮动标签属性（非完全脱离）：

假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。

注意：当初float被设计的时候就是用来完成文本环绕的效果，所以文本不会被挡住，这是float的特性，即float是一种不彻底的脱离文档流方式。

float：left，right，both

清除浮动： clear : none | left | right | both

none : 默认值。允许两边都可以有浮动对象

left : 不允许左边有浮动对象

right : 不允许右边有浮动对象

both : 不允许有浮动对象

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 <style> #div4{ border:solid 1px lavender; background-color: rebeccapurple; height: 100px; } #div1{ background-color: darkolivegreen; height: 100px; width: 980px; margin: auto; } #div2{ border-left: solid 1px lavender; height: 100px; width: 100px; background-color: darkgray; float: left; } #div3{ border-left: solid 1px lavender; height: 100px; width: 100px; background-color: darkgray; float: left; } #clear{ clear:both; }</style><div id="div4"> <div id="div1"> <div id="div2">div2</div> <div id="div3">div3</div> </div> <div id="clear"></div></div>

注：div2和div3使用float浮动起来，如想将div4的样式显示出来，需增加一个clear标签将架子撑起来，清除浮动

清除浮动第二种方法，overflow：hidden 将溢出的信息隐藏

overflow：auto;不光隐藏并出现滚动条

3.7 CSS样式display

块级标签和行内标签相互转换

1 2 3 4 <body> <div style="display: inline">块级</div> <span style="display: block">行内</span></body>

注：display:inline 转换为行内标签；display：block转换为块级标签；另还有display：none不显示

行内标签：无法设置高度，宽度，padding margin
块级标签：设置高度，宽度，padding margin

1 2 3 4 <body> <span style="display: inline-block;height: 50px;width: 70px">行内</span> <div style="display: inline">块级</div></body>

注：display:inline-block 既有inline的属性（默认自己有多少占多少）又有block的属性（可以设置高度、宽度、padding、margin）

3.8 CSS样式边距

外边距margin

1 2 3 4 5 6 <body> <div style="border: 2px solid red;height: 70px;"> <div style="background-color: green;height: 50px; margin-top: 25px;"></div> </div></body>

内边距padding

1 2 3 4 5 6 <body> <div style="border: 2px solid red;height: 70px;"> <div style="background-color: green;height: 50px; padding-top: 25px;"></div> </div></body>

上一篇：默认js旋转图表完整代码(CSS h 下一篇：如何在CSS中水平居中DIV

网站建设

Css