CSS学习（一）

最新推荐文章于 2024-08-08 10:33:11 发布

GuTaiWEI

最新推荐文章于 2024-08-08 10:33:11 发布

阅读量100

点赞数

分类专栏：前端学习文章标签： html css

本文链接：https://blog.csdn.net/qq_43826202/article/details/118003760

版权

前端学习专栏收录该内容

15 篇文章 0 订阅

订阅专栏

CSS学习（1）

记录CSS基础的语法，选择器，字体属性，文本属性以及引入方式。

CSS基础语法

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

1.选择器是用于指定 CSS 样式的 HTML 标签，花括号内是对该对象设置的具体样式

2.属性和属性值以“键值对”的形式出现

3.属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等

4.属性和属性值之间用英文“:”分开，多个“键值对”之间用英文“;”进行区分

代码演示

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

CSS基础选择器

CSS 选择器的作用

选择器(选择符)就是根据不同需求把不同的标签选出来这就是选择器的作用。

选择器的分类

选择器分为基础选择器和复合选择器两个大类，这里只记录基础选择器。

基础选择器包括：标签选择器、类选择器、id 选择器和通配符选择。

标签选择器

标签选择器是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。

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

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

语法格式

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

类选择器

类选择器允许以一种独立于文档元素的方式来指定样式。

语法格式

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

结构需要用class属性来调用，例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=`, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>类选择器的使用方式</title>
    <style>
        .red {
            color:  red;
        }
    </style>
</head>
<body>
    <div class="red">变红色</div>
</body>
</html>

注意：

不要使用纯数字、中文等命名，尽量使用英文字母来表示。
不能用标签名做class属性
命名规范：https://pan.baidu.com/s/10hYQ6oXUxbkBgjBf64Rl4g 提取码: f2hp
多类名的使用：

(1) 在标签class 属性中写多个类名

(2) 多个类名中间必须用空格分开

(3) 这个标签就可以分别具有这些类名的样式

<div class="red font20">多类名使用方式</div>

id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以“#" 来定义。

语法规范

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

id 选择器和类选择器的区别：

1. 类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用。

2. 类选择器可以多次被引用，id选择器只能被引用一次。

3. 类选择器是“.类名”，id选择器是“#id名”。

通配符选择器

在 CSS 中，通配符选择器使用“*”定义，它表示选取页面中所有元素（标签）。

通配符选择器不需要调用，自动就给所有的元素使用样式。

语法格式

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

CSS字体属性

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

CSS 使用 font-size 属性定义字体大小。

p { 
 font-size: 20px; 
}

值后面加px(像素)
chrome浏览器文字默认大小16px
可以给 body 指定整个页面文字的大小

字体粗细

CSS 使用 font-weight 属性设置文本字体的粗细。

p { 
 font-weight: bold;
}

其他属性

文字样式

CSS 使用 font-style 属性设置文本的风格。

p { 
 font-style: normal;
}

字体复合属性

语法格式

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

使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开
不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用

CSS文本属性

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

文本颜色

color 属性用于定义文本的颜色

div { 
 color: red;
}

定义颜色的方式

对齐文本

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

div { 
 text-align: center;
}

装饰文本

text-decoration 属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。

div { 
 text-decoration：underline；
}

文本缩进

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

div { 
 text-indent: 10px;
}

1. 属性值可以是负值

2. 可以将px替换为em（em 是一个相对单位，就是当前元素（font-size) 1 个文字的大小, 如果当前元素没有设置大小，则会按照父元素的 1 个文字大小）

行间距

line-height 属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离.

p { 
 line-height: 26px;
}

CSS的引入方式

CSS 样式表可以分为三大类：

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

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

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

行内样式表

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

<div style="color: red; font-size: 12px;"> 行内样式 </div>

内部样式表

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

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

外部样式表

实质是将样式单独写到CSS 文件中，之后把CSS文件引入到 HTML 页面中使用。

引入外部样式表分为两步：

1. 新建一个后缀名为 .css 的样式文件，把所有 CSS 代码都放入此文件中。

2. 在 HTML 页面中，使用标签引入这个文件。

<link rel="stylesheet" href="css文件路径">

属性作用

总结

基础选择器

字体属性

文本属性

引入方式

GuTaiWEI

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习（一）

CSS学习（1）记录CSS基础的语法，选择器，字体属性，文本属性以及引入方式。CSS基础语法CSS 规则由两个主要的部分构成：选择器以及一条或多条声明。1.选择器是用于指定 CSS 样式的 HTML 标签，花括号内是对该对象设置的具体样式2.属性和属性值以“键值对”的形式出现3.属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等4.属性和属性值之间用英文“:”分开，多个“键值对”之间用英文“;”进行区分代码演示<style> div
复制链接

扫一扫