4.CSS层叠样式表一

最新推荐文章于 2023-08-23 20:34:01 发布

白灰绿红褐

最新推荐文章于 2023-08-23 20:34:01 发布

阅读量792

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/sss_white/article/details/119707526

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CSS层叠样式表

目标

能够说出什么是CSS
能够使用CSS基础选择器
能够设置字体样式
能够设置文本样式
能够说出CSS的三种引入方式
能够使用Chrome调试工具调试样式

1、CSS简介

CSS：美化网页，布局页面

1.HTML的局限性

HTML主要做结构，显示网页元素内容

2.CSS-网页的美化

层叠样式表（Cascading Style Sheets）简称CSS，有时称CSS样式表、级联样式表

CSS是一种标记语言

CSS用于设置HTML页面中的文本内容（字体、大小、对齐方式）、图片的外形（宽高、边框样式、边距等）、版面的布局、外观显示样式

CSS好处：由HTML专注去做结构呈现，样式交给CSS，即结构（HTML）与样式（CSS）相分离

3.CSS语法规范

CSS规则由两个主要部分构成：选择器和一条或多条声明

选择器 {样式} <–> 给谁改样式 {改什么样式}

p {
	color: red;
	font-size: 12px;
}

写在< head>标签里，< style> < /style>
选择器是HTML标签
属性和属性值之间用 : 分隔
多个"键值对"之间用；分隔

4.代码风格

1、样式格式书写

①紧凑格式

h3 {color: deeppink; font-size: 20px;}

②展开格式(推荐)

p {
    color:deeppink;
    font-size:20px;
}

2、样式大小写风格

h3 {
	color: red;
}

H3 {
	COLOR: RED;
}

推荐小写（全部用小写字母）

3、空格规范

h3 {
    color: red;
}

冒号和属性值保留一个空格
选择器和大括号之间留一个空格

2、CSS基础选择器

1.选择器的作用

选择器（选择符）的作用：根据不同的需求把不同的标签选出来（用来选择具体标签）

2.选择器的分类

选择器分为基础选择器和复合选择器两大类

基础选择器是由单个选择器组成的
基础选择器包括：标签选择器、类选择器、id选择器和通配符选择器

①、标签选择器

标签选择器（元素选择器）是指用HTML标签名称作为选择器，将页面中该标签统一指定样式

标签名{
    属性1: 属性值;
    属性2: 属性值;
    属性3: 属性值;
}

作用：标签选择器是把某一类标签全部选择出来

优点：能快速为页面中同类型的标签设置统一样式

缺点：不能差异化设置，只能选择全部的当前标签

②、🔺类选择器

差异化选择不同的标签，单独选一个或某几个标签设置样式

.类名 {
    属性1: 属性值;    
    属性2: 属性值;
    属性3: 属性值;
}

样式定义：将所有拥有red类的HTML元素设置为红色   red类名
.red {
    color: red;
}

结构用class属性调用class类
<div class="red">变红色<div>

类选择器口诀：样式点定义，结构类调用(class)，一个或多个，开发最常用

①不能使用标签名作为类名

②可以理解为给标签起了一个名字

③长名称或词组用短横线分隔 - 为选择器命名

④不要使用纯数字、中文命名，尽量使用英文字母

⑤类名要有意义

⑥命名规范：见附件（类命名规则.doc）

多类名

可以给一个标签指定多个类名，可理解为一个标签有多个名字

1、多类名使用方式

 <div class="box red">1</div>

在class属性中写多个类名
用空格分开

2、多类名开发中使用场景

把标签元素相同的样式写在一个类里面，这些标签调用这个公共的类，然后再调用自己独有的类，从而节省CSS代码，方便统一修改

③、id选择器

#id名 {
    属性1: 属性值;
    属性2: 属性值;
    ...
}

#red {
 	color: red;
}

<div id="red">王琳凯</div>   只能调用一次

id选择器的口诀：样式#定义，结构id调用，只能调用一次，别人切勿使用

id选择器和class选择器的区别

类选择器（class）可被多个标签使用可多次使用
id选择器<–>省份证号码，唯一的，不得重复只允许使用一次
类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素上，经常和JavaScript搭配使用

④、通配符选择器

"*"定义，选取页面中的所有标签，不用写名字

* {
    属性1: 属性值;
    属性2: 属性值;
    ...
}

*把html body div span li 等标签均修改了样式
通配符选择器不需要名字，不需要调用
特殊情况使用

3、CSS字体属性

CSS Fonts（字体）属性用于定义字体系列、大小、粗细和文字样式（如斜体）

1.字体系列

font-family用来定义字体系列（微软雅黑、黑体、宋体）

font-family: "Microsoft YaHei" / "微软雅黑" 中英文皆可，推荐英文

font-family: 'Times New Roman', Times, serif; 一次性指定很多个字体

各个字体之间用英文逗号隔开
有空格隔开的多个单词组成的字体，加上’ ’ 或 " "
尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正常显示（万一其他用户没有该字体？）
常见字体 body {font-family： 'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB';}

(如果第一种字体系统有的话，就用第一种字体，如果第一种字体没有的话，就看第二种字体，如果系统有，就用该字体，否则继续往后走，如果这些字体系统都没有，那就用系统默认字体)
字体设置用body标签
实际工作中按照团队约定来写字体

2.字体大小

font-size属性

p {
    font-size: 20px;
}

px（像素）是网页中最常用的单位
谷歌浏览器默认的文字大小是16px
不同浏览器的字体默认大小不一样，我们尽量写一个明确大小值
可以给body指定整个页面文字的大小（标题标签比较特殊，需要单独指定文字大小）

3.字体粗细

font-weight属性

normal / bold / bolder / lighter / number

正常字体(400) / 粗体 / 特粗体 / 细体 / 100-900（推荐，不要跟单位）

实际开发中，我们更提倡使用数字表示加粗或者变细
400 <–> normal 700 <–> bold

4.文字样式

font-style属性

属性值	作用
normal	默认值，浏览器会显示标准的字体样式
italic	斜体

一般不给文字加斜体，反而要给斜体标签（em，i）改为不斜体

em {
    font-style: normal;
}

字体复合属性

字体属性可以把文字样式综合来写，这样可以更节约代码

body {
    font: font-style font-weight font-size/line-hight font-family;
}

font: italic 700 16px/20px 'Microsoft Yahei';

不能改变顺序各个属性间以空格隔开
不需要设置的属性可以省略，但必须保留 font-size 和 font-family 属性，否则font属性将不起作用

font: 20px 'Microsoft Yahei'

4、CSS文本属性

CSS Text（文本）属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等

1.文本颜色

color属性

dic {
    color: red;
}

表示
预定义的颜色值	red, green, pink, blue, …
十六进制	#FF0000(红), #FF6600, #29D794
RGB代码	rgb(255,0,0) 或 rgb(100%,0%,0%)

开发最常用十六进制·

2.对齐文本

text-align属性用于设置文本内容的水平对齐方式

div {
    text-align: center;
}

属性值	解释
left	左对齐（默认值）
right	右对齐
center	居中对齐

3.装饰文本

text-decoration属性：添加到文本的修饰下划线、删除线、上划线等

div {
    text-decoration: underline;
}

属性值	描述
none	默认（没有装饰线）
underline	下划线
overline	上划线（几乎不用）
line-through	删除线

如何添加下划线，如何删去下划线▲。

4.文本缩进

text-indent属性：用来指定文本的第一行缩进，通常是段落的首行缩进

div {
    text-indent: 10px;
}

也可为负值

p {
    text-indent: 2em;
}

em 是一个相对单位，就是当前元素 1个文字的大小

5.行间距

line-height属性行间的距离（行高）

p {
    line-height: 26px; 
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jRUtLmRQ-1628952880296)(C:/Users/PXQ/AppData/Roaming/Typora/typora-user-images/image-20210814224121455.png)]

上间距和下间距值相同

测量行间距

5、CSS的引入方式

1.CSS的三种样式表

按照CSS样式书写的位置（或者引入的方式），CSS样式表分为三类

1.内部样式表（嵌入式）

2.行内样式表（行内式）

3.外部样式表（链接式）

内部样式表

内部样式表（内嵌样式表）是将CSS写到html页面内部。将所有的CSS代码抽取出来，单独放到一个< style>标签中。

<style>
    div {
        color: green;
        font-size: 12px;
    }
</style>

< style>标签理论上可以放在HTML文档的任何地方，但一般会放在文档的< head>标签中
通过次方式，可以方便控制当前整个页面的元素样式设置
代码结构清晰，但是并没有实现结构与样式完全分离
使用内部样式表设定CSS，称为嵌入式引用（练习时使用的方式）

行内样式表

行内样式表（内联样式表）是在元素标签内部的style属性中设定CSS样式。适合修改简单样式

直接在当前行修改样式

	<p style="color: blue; font-weight: 700;">盛年不重来，一日难再晨。</p>

style是标签的属性
只能控制当前标签样式
不推荐大量使用，没有实现结构与样式相分离
使用行内样式表设定CSS，称为行内式引入

白灰绿红褐

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
4.CSS层叠样式表一

CSS层叠样式表目标能够说出什么是CSS能够使用CSS基础选择器能够设置字体样式能够设置文本样式能够说出CSS的三种引入方式能够使用Chrome调试工具调试样式1、CSS简介CSS：美化网页，布局页面1.HTML的局限性HTML主要做结构，显示网页元素内容2.CSS-网页的美化层叠样式表（Cascading Style Sheets）简称CSS，有时称CSS样式表、级联样式表CSS是一种标记语言CSS用于设置HTML页面中的文本内容（字体、大小、对齐方式）、图片的外形（宽高
复制链接

扫一扫