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 >块

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

div{

background-color:darkgrey;

height: 100px;

width:100px;

}

</style>

</head>

链接式：

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

<head>

<meta charset="UTF-8">

<title>Title</title>

<link href="mystyle.css" rel="stylesheet" type="text/css"/>

</head>

导入式：

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

<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 通用元素选择器

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

*{

color: darkgrey;

}

2.1.2 标签选择器

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

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

div{

color: grey;

background-color: antiquewhite;

}

2.1.3 class选择器

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

.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的元素

#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之间用逗号分隔

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之间用空格分隔;

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>

2.2.3 子元素选择器

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

<style>

#outer>.c1{

color: aqua;

}

</style>

<div id="outer">

<p class="c1">p1.....</p>

<div class="c2">

<p class="c1">p2....</p>

</div>

2.2.4 毗邻元素选择器

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

<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标签匹配上对应的样式

<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 : 不允许有浮动对象

<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

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

<body>

<div style="display: inline">块级</div>

<span style="display: block">行内</span>

</body>

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

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

<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

<body>

<div style="border: 2px solid red;height: 70px;">

<div style="background-color: green;height: 50px;

margin-top: 25px;"></div>

</div>

</body>

内边距padding

<body>

<div style="border: 2px solid red;height: 70px;">

<div style="background-color: green;height: 50px;

padding-top: 25px;"></div>

</div>

</body>

时间： 2024-10-12 20:11:11

web前端基础知识-（二）CSS基本操作

1. 概述

2. CSS选择器

2.1 基础选择器

2.1.1 通用元素选择器

2.1.2 标签选择器

2.1.3 class选择器

2.1.4 id选择器

2.2 组合选择器

2.2.1 多元素选择器

2.2.2 后代元素选择器

2.2.3 子元素选择器

2.2.4 毗邻元素选择器

2.3 属性选择器

3. 常用属性

3.1 颜色属性

3.2 字体属性

3.3 背景属性

3.4 文本属性

3.5 CSS样式边框

3.6 CSS样式浮动

3.7 CSS样式display

3.8 CSS样式边距

web前端基础知识-（二）CSS基本操作的相关文章

前端基础知识之css

web前端基础知识-（一）html&css基本操作

web前端基础知识学习网站推介

web前端基础知识总结

web前端基础知识-（一）html基本操作

web前端基础知识-（三）JavaScript基本操作

web前端基础知识 - Django进阶

web前端基础知识整理

web前端基础知识