Web前端开发【四】CSS总结
2021/6/8 18:23:20
本文主要是介绍Web前端开发【四】CSS总结,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
1. CSS,指的是“Cascading Style Sheet(层叠样式表)”,是用来控制网页外观的一门技术。
2. CSS引入方式:
- 外部样式表
<link rel="stylesheet" type="text/css" href="文件路径" />
- 内部样式表
<style type="text/css"> …… </style>
- 行内样式表
说明:内部样式表的CSS是在“style标签”内定义的,而行内样式表的CSS是在“标签的style属性”中定义的。
3.元素的id和class
id只允许出现一次,而class允许出现多次。(id就像你的身份证号,而class就像你的名字)
4. CSS选择器(常用):
语法:
选择器 { 属性1 : 取值1; …… 属性n : 取值n; }
- 元素选择器:
div{……}
- id选择器:
#box{……}
- class选择器:
.box{……}
- 后代选择器:
father div{……}
- 群组选择器:
h3,p{……}
5. 字体样式:
属性 | 说明 |
---|---|
font-family | 字体类型 |
font-size | 字体大小 |
font-weight | 字体粗细 |
color | 字体颜色 |
说明:
- font-family属性如果不指定字体,则会采用浏览器默认字体(即宋体)来显示。如果指定多种字体,则多个字体将按从左到右的优先顺序生效;在实际开发中,常用的中文字体有微软雅黑、宋体,常用的英文字体有**"Times New Roman "、Arial、Verdana**;
- font-size属性取值一般是“像素值”,不会采用“关键字”。在实际开发中,常用字体大小为12px、14px,很少用13px、15px等。
-font-weight属性 在实际开发中,我们只会用到“font-weight:bold;”这一个属性值,其他的几乎用不上。
-color属性取值有2种,一种是关键字,如red、green、blue等;另外一种是“16进制RGB值”,如#EEEEEE、#FBF9D0等。
6. CSS注释
/* 注释的内容 */
7.文本样式:
属性 | 说明 |
---|---|
text-indent | 首行缩进 |
text-align | 水平对齐 |
text-decoration | 文本修饰 |
line-height | 行高 |
text-transform | 大小写 |
letter-apacing、word-spacing | 字母间距、词间距 |
说明:
- text-indent属性技巧:想要实现段落首行缩进2个汉字的距离,text-indent值应该是font-size值的2倍
- text-align属性取值有left,center,right
- text-decoration属性取值有none(去除所有划线效果,默认),underline(下划线) ,line-through(中划线),overline(顶划线)。“text-decoration:none;”一般用于去除a元素的下划线
- line-height属性用来控制一行文本的高度
- 一般来说,text-transform、letter-spacing、word-spacing这3个在实际开发几乎用不上
8. 边框样式:
属性 | 说明 |
---|---|
border-width | 边框宽度 |
border-style | 边框外观 |
border-color | 边框颜色 |
边框的简写形式:border:1px solid red;
局部边框样式:border-top(上边框),border-bottom(下边框),border-left(左边框),border-right(右边框)。
技巧:去除某一条边框(3种写法)
border-bottom:0px\0\none;
9. 列表样式:
属性 | 说明 |
---|---|
list-style-type | 定义列表项符号 |
list-style-image | 定义列表项图片 |
说明:
- list-style-type属性是针对ol或者ul元素的,而不是li元素
- 在实际开发中,我们一般用“list-style-type:none;”来去除列表项符号。(经常用)
- 列表项图片语法:
list-style-image:url(图片路径);
在实际开发中,对于列表项图标,更多的是使用“字体图标iconfont”来实现,而不是list-style-image属性。
10. 表格样式:
属性 | 说明 |
---|---|
caption-side | 表格标题位置(top、bottom) |
border-collapse | 表格边框合并(separate、collapse) |
border-spacing | 表格边框间距(像素值) |
说明:一般情况下我们都只在table元素中定义caption-side、border-collapse、border-spacing。
11. 图片样式:
属性 | 说明 |
---|---|
width | 定义图片的宽度 |
height | 定义图片的高度 |
border | 定义图片的边框 |
text-align | 定义图片水平对齐方式 (left、center、right) |
vertical-align | 定义图片垂直对齐方式(top、middle、baseline、bottom) |
float | 定义文字环绕效果(left、right) |
12. 背景样式:
属性 | 说明 |
---|---|
background-color | 定义背景颜色 |
background-image | 定义背景图片样式 |
background-repeat | 定义背景图片重复 |
background-position | 定义背景图片位置 |
background-attachment | 定义背景图片固定(scroll、fixed,几乎用不上) |
说明:
- background-image语法:
background-image: url(图片路径);
- background-repeat取值有repeat(两个方向同时平铺,默认)、repeat-x(只在水平方向平铺)、repeat-y(只在垂直方向平铺)、no-repeat(不平铺)
- 在实际开发中,background-position一般用于实现CSS Spirit(精灵图片)
14. 超链接样式:
(1)超链接伪类:
伪类 | 说明 |
---|---|
a:link | 定义a元素未访问时的样式 |
a:visited | 定义a元素访问后的样式 |
a:hover | 定义鼠标经过a元素时的样式 |
a:active | 定义鼠标点击激活时的样式 |
说明:对于超链接伪类来说,我们只会用到2种状态:未访问时状态和鼠标经过状态a{……} a:hover{……}
(2):hover伪类:可以定义任何一个元素在鼠标经过时的样式!注意,是任何元素!应用非常广泛,任何一个网站都会大量用到它,需要重点掌握。
(3)鼠标样式:
- 浏览器鼠标样式:
cursor:取值;
,在实际开发中,我们一般只会用到default(默认)、pointer、text这三个取值。 - 自定义鼠标样式:
cursor: url(图片地址), 属性值;
,其中鼠标图片后缀名一般都是**.cur**,可以使用Photoshop来制作。
15. 盒子模型:
(1)CSS盒子模型的组成部分:
属性 | 说明 |
---|---|
content | 内容,可以是文本或图片 |
padding | 内边距,用于定义内容与边框之间的距离 |
margin | 外边距,用于定义当前元素与其他元素之间的距离 |
border | 边框,用于定义元素的边框 |
说明:所有的元素都可以视为一个盒子,盒子模型是由内容区(content)、内边距(padding)、边框(border)以及外边距(margin)4大部分组成。
(2)宽高:元素的宽度(width)和高度(height)是针对内容区而言的。只有块元素才可以设置width和height,行内元素是无法设置width和height的。
(3)内边框(padding)与外边框(margin):
- 局部样式:
padding\margin-top: 像素值; padding\margin-right: 像素值; padding\margin-bottom: 像素值; padding\margin-left: 像素值;
- 简写形式:
padding\margin:像素值; padding\margin:像素值1 像素值2; padding\margin:像素值1 像素值2 像素值3 像素值4;
- 区别:padding体现的是元素的“内部结构”,而margin体现的是元素之间的相互关系。
16. 正常文档流与脱离文档流:
(1)正常文档流,又称为“普通文档流”或“普通流”,是指将一个页面从上到下分为一行一行,其中块元素独占一行,相邻行内元素在每一行中按照从左到右排列直到该行排满。
(2)脱离文档流,指的是脱离正常文档流。如果我们想要改变正常文档流,可以使用2种方法:浮动和定位。
17. 浮动布局:
(1) float属性取值:
属性值 | 说明 |
---|---|
left | 元素向左浮动 |
**right | **元素向右浮动 |
(2)浮动最常用于实现水平方向上的并排布局,例如两列布局、多列布局。
(3)清除浮动:clear:both;
,清除该元素的兄弟元素浮动之后带来的影响。我们一般都是在浮动元素后面再增加一个空元素,然后为这个空元素定义“clear:both;”来清除浮动。
18.定位布局:
(1)position属性取值:
属性值 | 说明 |
---|---|
fixed | 固定定位 |
relative | 相对定位 |
absolute | 绝对定位 |
static | 静态定位(默认值),了解即可 |
(2)说明:
- top、bottom、left和right这四个属性不一定全部都用到,一般只会用到其中两个。
- 默认情况下,固定定位和绝对定位的位置是相对于浏览器而言,而相对定位的位置是相对原始位置而言。
这篇关于Web前端开发【四】CSS总结的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-05HTML 颜色
- 2024-10-05HTML 颜色名
- 2024-10-01AntDesign-Form-rules学习:轻松入门教程
- 2024-10-01classnames学习:轻松掌握前端中的类名管理
- 2024-09-30前端案例资料:新手入门必读教程
- 2024-09-30前端编程资料:新手入门必备教程
- 2024-09-30前端培训资料:新手入门必读教程
- 2024-09-30滚动吸顶项目实战:从入门到上手
- 2024-09-29HTML学习:span标签教程详解
- 2024-09-29HTML基础:button标签教程