前端CSS基础系列
前端基础-CSS-01
前端基础-CSS-02
前端基础-CSS-03
前端基础-CSS-04
前端基础-CSS-05
前端基础-CSS-06
前端基础-CSS-07
文章目录
3.1. 引入CSS
- 概念：CSS，通常称为CSS样式表或层叠样式表
- 作用：主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽度、边框样式、边距等）以及版式的布局和外观显示样式。CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。
3.2. css样式方法
-
行内式（内联样式）
-
概念：称为内样式、行间样式，是通过标签的
style属性来设置元素的样式 -
语法：
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3; "> 内容 </标签名>- 任何HTML标签都有style属性，用来设置行内式
-
注意：
- style就是标签的属性
- 属性和值中间是
: - 多组属性之间用
;隔开 - 只能控制当前的标签和以及嵌套在其中的字标签，造成代码冗余
- 缺点是没有实现样式与结构的分离
-
代码实例
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <table> <h1 style="color: pink; font-size: 18px;">世纪佳缘，我也在这里等你</h1> </table> </body> </html>
-
-
内部样式表（内嵌样式表）
-
概念：称为内嵌式，是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义
-
语法：
<head> <style type="text/css"> 选择器 { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } </style> </head> -
代码实例
<head> <meta charset="UTF-8"> <title>Document</title> <style> /* 给h2标签设置字体颜色为绿色,字体大小为20px */ h2 { color: green; font-size: 20px; } /* 给h4标签设置rgb颜色 */ h4 { color: rgb(88, 170, 109); } /* 给p标签设置蓝色 */ p { color: blue; } </style> </head>
-
-
外部样式表（外链式）
-
概念：称链入式，是将所有的样式放在一个或多个以
.css为拓展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中 -
语法：
<head> <link rel="stylesheet" type="text/css" href="css文件路径" /> </head> -
注意：
- link是一个单标签
-
link标签需要放在头部标签中，并且指定link标签的三个属性
属性 作用 rel 定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。 type 定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。我们都可以省略 href 定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。 -
代码实例
<!-- html文件 --> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <!-- 实现与css的连接 结构与样式分离 --> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h3>大把时间</h3> </body> </html>/* css文件 */ /* 给h3标签设置deeppink颜色,字体大小设置为20px */ h3 { color: deeppink; font-size: 20px; }
-
-
三种样式表总结：
样式表 优点 缺点 使用情况 控制范围 行内样式表 书写方便，权重高 没有实现样式和结构相分离 较少 控制一个标签（少） 内部样式表 部分结构和样式相分离 没有彻底分离 较多 控制一个页面（中） 外部样式表 完全实现结构和样式相分离 需要引入 最多，强烈推荐 控制整个站点（多）
3.3. CSS选择器
- 作用：找到特定的HTML页面元素（标签）
3.4. CSS基础选择器
-
标签选择器
-
概念：标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。
-
语法：
标签名 { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } -
作用：可以把某一类标签全部选择出来
-
优点：是能快速为页面中同类型的标签统一样式
-
缺点：不能设计差异化样式
-
代码实例
<!-- CSS样式 --> <style> div { color: green; font-size: 20px; } span { color: rgb(88, 170, 109); } </style> <!-- css修饰的代码 --> <div>标签选择器，</div> <div>页面同选起。</div> <div>直接写标签，</div> <div>全部不放弃。</div> <span>标签选择器，</span> <span>页面同选起。</span> <span>直接写标签，</span> <span>全部不放弃</span>
-
-
类选择器
-
语法：
类选择器
.类名 { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }标签
<p class="类名"> </p> -
注意：
- 类选择器使用
.进行标识，后面紧跟类名 - 长名称或词组可以使用中横线来为选择器命名
- 不要纯数字、中文等命名，尽量使用英文字母来表示
- 类选择器使用
-
代码实例
<style> /*类选择器*/ .red { color: red; } </style> <body> /*设置div标签的内容颜色为红色*/ <div class="red">嘿嘿，工作类最多。</div> </body>
-
-
id选择器
-
语法：
-
id选择器
#id名 { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } -
标签
<p id="id名"> </p>
-
-
注意：
- 元素的id是唯一的，只能对应于文档中的某一个具体的元素
-
代码实例
<html lang="en"> <head> <meta charset="UTF-8"> <title>Google案例</title> <style> #pink { color: pink; } </style> </head> <body> <p>愿你出走半生，</p> <p>归来仍是少年。</p> <p id="pink">愿我洗尽铅华，</p> <p id="pink">依旧笑魇如花。</p> </body> </html>
-
-
通配符选择器
-
概念：使用
*表示，*就是选择所有的标签，匹配范围最广，能匹配页面中所有的元素 -
语法：
* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } -
代码示例：
* { margin: 0; /* 定义外边距*/ padding: 0; /* 定义内边距*/ }
-
3.5. font字体
-
font-size：大小
-
作用：用于设置字号
-
用法：
p { font-size: 20px; } -
单位：
-
-
font-family：字体
-
作用：设置哪一种字体
-
用法：
p { font-size:"微软雅黑"; } -
注意：
- 可以同时指定多个字体，中间用逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体
- 各种字体之间必须用英文状态下的逗号隔开
- 中文字体需要加英文状态下的引号，英文字体一般不需要加引号
- 英文字体必须在中文字体之前使用
- 如果字体中包含空格，#，$等符号，则该字体必须加英文状态下的单引号或者双引号
- 尽量使用系统默认字体
-
unicode编码
字体名称 英文名称 Unicode 编码 宋体 SimSun \5B8B\4F53 新宋体 NSimSun \65B0\5B8B\4F53 黑体 SimHei \9ED1\4F53 微软雅黑 Microsoft YaHei \5FAE\8F6F\96C5\9ED1 楷体_GB2312 KaiTi_GB2312 \6977\4F53_GB2312 隶书 LiSu \96B6\4E66 幼园 YouYuan \5E7C\5706 华文细黑 STXihei \534E\6587\7EC6\9ED1 细明体 MingLiU \7EC6\660E\4F53 新细明体 PMingLiU \65B0\7EC6\660E\4F53
-
-
font-weight：字体粗细
-
用法：
p { font-weight:normal; } -
属性值
属性值 描述 normal 默认值（不加粗的） bold 定义粗体（加粗的） 100~900 400 等同于 normal，而 700 等同于 bold
-
-
font-style：字体风格
用法：
p { font-style:normal; } -
综合代码实例
.title { font-size: 20px; font-family: "宋体"; font-weight: 700; font-style: italic; } -
综合设置字体样式
-
font用于对字体进行综合设置
-
用法：
选择器 {font: font-style font-weight font-size/line-height font-family;} -
注意：
- 使用
font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开 - 不需要设置的属性可以省略，但必须保留
font-size和font-family属性，否则属性不起作用
- 使用
-
-
text-align：文本水平对齐方式
-
作用：text-align属性用于设置文本内容的水平对齐，相当于html中align对齐属性
-
属性值
属性 解释 left 左对齐(默认值) right 右对齐 center 居中对齐
-
-
line-height：行间距
- 作用：用于设置行间距，也称为行高
- 单位：line-height常用的属性单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用更多的是像素px
- 技巧：一般情况下，行距比字号大7,8像素就可以了
-
text-indent：首行缩进
- 作用：text-indent属性用于设置首行文本的缩进
- 属性值
- 其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值
- 建议使用em作为设置单位
- 1em就是一个字的宽度
-
text-decotation：文本的装饰
- 用法：给链接修改装饰效果
- 用法：给链接修改装饰效果
3.6. 开发者工具
-
F12或者ctrl+shift+i打开开发者工具 -
菜单：右键网页空白处—检查
3.7. CSS外观属性
3.7.1. color: 文本颜色
-
作用：color属性用于定义文本的颜色
-
属性值：
表示表示 属性值 预定义的颜色值 red，green，blue，pink 十六进制 #FF0000，#FF6600，#29D794 RGB代码 rgb(255,0,0)或rgb(100%,0%,0%)
3.7.2. text-align: 文本水平居中对齐
-
作用：text-align属性用于设置文本内容的水平对齐
-
属性值：
属性 解释 left 左对齐（默认值） right 右对齐 center 居中对齐
3.7.3. line-height: 行间距
-
作用：line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。
-
单位：常用的单位有三种，分别为px，相对值em和百分比%，经常使用的是px
3.7.4. text-indent:首行缩进
- 作用：text-indent属性用于设置首行文本的缩进
- 属性值：em为字符宽度的倍数
3.7.5. text-decoration 文本的装饰
| 值 | 描述 |
|---|---|
| none | 默认，定义标准的文本，取消下划线（最常用） |
| underline | 定义文本下的一条线，下划线 也是我们链接自带的（常用） |
| overline | 定义文本上的一条线，（不用） |
| line-through | 定义穿过文本下的一条线，（不常用） |
3.8. vscode快捷方式
emmet语法
-
生成标签：输入标签名，然后按
tab键，生成<div></div> -
如果生成多个相同的标签，直接用
*即可div*3 <div></div> <div></div> <div></div> -
如果有父子级关系的标签，可以用
>ul>li*3 <ul> <li></li> <li></li> <li></li> </ul> -
如果有兄弟关系的标签，可以用
+div+p <div></div> <p></p> -
如果生成带有类名或者id名的，可以直接
.demo或者#two.demo <div class="demo"></div> #two <div id="two"></div> -
如果生成的div类名是由顺序的，可以用自增符号
$.demo$*3 <div class="demo1"></div> <div class="demo2"></div> <div class="demo3"></div>
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
