CSS简介和基础部分

最新推荐文章于 2024-10-18 11:46:13 发布

昱晟168

最新推荐文章于 2024-10-18 11:46:13 发布

阅读量162

点赞数 1

分类专栏： HTMLCSS 文章标签： CSS 基础选择器字体属性文本属性样式表

本文链接：https://blog.csdn.net/weixin_47267628/article/details/125249837

版权

HTMLCSS 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1.`CSS`简介

CSS是层叠样式表(Cascading Style Sheets)

HTML主要做结构，显示元素内容
CSS美化HTML，布局网页
CSS最大价值，由HTML专注做结构，样式由CSS，使得HTML和CSS相分离

2.语法规范

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

选择器是用于指定CSS样式HTML标签，花括号内是对该对象设置具体样式
属性和属性值以键值对的形式出现
属性是对指定的对象设置的样式属性，例如：字体大小，文本颜色
属性和属性值之间用英文的:分隔
多个键值对之间用英文;进行区分

CSS所有的样式，都包含在<style>标签内，<style>一般写到<head></head>

3.基础选择器

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

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

标签选择器

标签选择器（元素选择器）是指HTML标签名称作为选择器

语法：

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>男生</p>
    <p>男生</p>
    <p>男生</p>

    <br/>

    <div>女生</div>
    <div>女生</div>
    <div>女生</div>
</body>
</html>

类选择器

**语法：**结构需要用class属性来调用class类的意思

<div class="red">变红色</div>

注意是：

类选择器使用.进行标识，后面紧跟类名
样式点定义，结构类调用，一个或多个

多类名使用：

在标签class属性中写多个类名
多个类名中间必须空格分开
这个标签就可以分别具有这些类名的样式

<div class="red font">变红色</font>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            width: 900px;
            margin: 0 auto;
        }
        div {
            width: 200px;
            height: 200px;
        }
        .red {
            background-color: red;
        }
        .green {
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="red">red</div>
    <div class="green">green</div>
    <div class="red">red</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red {
            color: red;
        }
        .font {
            font-size: 35px;
        }
    </style>
</head>
<body>
    <div class="red font">
        刘德华
    </div>
</body>
</html>

`ID`选择器

HTML元素以ID属性来设置ID选择器，CSS中ID选择器以#来定义

语法：

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

ID属性只能在每个HTML文档中出现一次，口诀：样式#定义结构 ID调用，只能调用一次，别人切勿使用

ID选择器与类选择器的区别

类选择器如人名一样可以有多个
ID类选择器如人身份证号，全中国唯一的，不得重复

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #id1 {
            color: aqua;
        }
        #id2 {
            color: burlywood;
        }
    </style>
</head>
<body>
    <div id="id1">湛江</div>
    <div id="id2">海康</div>
</body>
</html>

通配符选择器

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

语法：

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

如：
* {
	margin : 0;
	padding : 0;
}

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

基础选择器总结

基础选择器	作用	特点	使用情况	用法
标签选择器	可以选出所有相同标签，如：P	不能差异化选择	较多	`p {color:red;}`
类选择器	可以选出`1`或`多`个标签	可以根据需求选择	非常多	`.nav {color:red;}`
`ID`选择器	一次只能选择`1`个标签	ID属性只能在每个HTML文档出现一次	一般使用与JS搭配	`#nav {color:red;}`
通配符选择器	选择所有的标签	选择太多，有部分不需要	特殊情况使用	`*{color:red;}`

如果是修改样式，类选择器是使用最多的

4.`CSS`字体属性

font(字体)属性用于定义字体系列，大小，粗细和 文字样式

字体系列`font-family`属性

语法：

div {
	font-family : Arial,"Microsoft Yahei","微软雅黑";
}

各种字体之间必须使用英文状态下逗号隔开
一般情况下，如果有空格隔开的多个单词组成字体，加引号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            font-family: "宋体" , Arial, Helvetica, sans-serif;
        }
    </style>
</head>
<body>
    <h3>海康湛江</h3>
    <p>谓得秦何死弄，诗的到动。</p>
    <p>绪娟的和郭相知罪感兼嗣太弟韩往毒无。</p>
    <p>不学承天动，娟。</p>
    <p>愚得生惊要他里怎掉，巴是。</p>
    <p>看韩气司友便于掉厅使畴，对自卞词不天一心。</p>
</body>
</html>

字体大小`font-size`属性

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

语法：

p {
	font-size : 20px;
}

px（像素）大小是最常用单位
可以给body指定整个页面文字大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            font-family: "宋体" , Arial, Helvetica, sans-serif;
        }

        h3 {
            font-size: 15px;
        }
    </style>
</head>
<body>
    <h3>海康湛江</h3>
    <p>谓得秦何死弄，诗的到动。</p>
    <p>绪娟的和郭相知罪感兼嗣太弟韩往毒无。</p>
</body>
</html>

字体粗细`font-weight`属性

语法：

p {
	font-weight : bold;
}

属性值	描述
`normal`	默认值（不加粗）
`bold`	定义粗体（加粗的）
`100-900`	`400`等同于`normal`，而`700`等同于`bold`，注意是这个数字后面不跟单位

文字样式`font-style`属性

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

p {
	font-style : normal; 
}

属性值	作用
`normal`	默认值，浏览器显示标准字体样式，`font-style:normal`;
`italic`	浏览器会显示斜体字体样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            font-family: "宋体" , Arial, Helvetica, sans-serif;
        }

        h3 {
            font-size: 15px;
        }

        .weight {
            /* 注意是： weight不能跟着单位*/
            font-weight: 700;
            /* 默认值是：normal */
            font-style: italic;

        }
    </style>
</head>
<body>
    <h3>海康湛江</h3>
    <p class="weight">谓得秦何死弄，诗的到动。</p>
    <p>绪娟的和郭相知罪感兼嗣太弟韩往毒无。</p>
    <p>不学承天动，娟。</p>
</body>
</html>

字体复合属性

语法：

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

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

字体属性总结

属性	表示	注意点
`font-size`	字号	我们通常单位是`px`像素，一定要跟上单位
`font-family`	字体	字体
`font-weight`	字体粗细	`700`为`bold` 不加粗为`normal`为`400` ，一定不能跟着单位 `100-900`
`font-style`	字体样式	`italic`为倾斜 `normal`不倾斜也是默认值
`font`	字体连写	字体连写顺序的，不能随意换位置，其中字号和字体必须同时出现

5.`CSS`文本属性

CSS Text文本属性可以定义文本的 颜色 对齐文本 装饰文本 文本缩进 行间距

文本颜色

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

语法：

div {
	color : red;
}

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

开发中最常用的是十六进制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            color: antiquewhite;
        }
    </style>
</head>
<body>
    <p>心变联间好胜，好者就或。</p>
</body>
</html>

对齐文本

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

语法：

div {
	text-align : center;
}

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            font-size: 40px;
            color: blanchedalmond;
            text-align: center;
        }
    </style>
</head>
<body>
    <div>之导燕老互是，定甲的娘。</div>
</body>
</html>

装饰文本

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

语法：

div {
	text-decoration : underline;
}

属性值	描述
`none`	默认，没有装饰线（最常用）
`underline`	下划线，链接`a`自带下划线（常用）
`overline`	上划线（几乎不用）
`line-through`	删除线（不常用）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a {
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div>
        target="_blank" 或 target="_self"
        <a href="https://fanyi.baidu.com/#en/zh/decoration" target="_blank" >湛江</a>
    </div>
</body>
</html>

文本缩进

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

语法：

div {
	text-indent : 10px;
}

注意是：通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以为负值

div {
	text-indent : 2em;
}

em是一个相对单位，就是当前元素font-size 1个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            font-size: 18px;
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <p>言特一自文你，有山中的最韦生二夭法程却破，书们。</p>
    <p>斯商最交临事老，秦未土思治我皇只程老出勉斯法化房游轻，听什动。</p>
</body>
</html>

行间距

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

语法：

p {
	line-height : 26px;
}

文本属性总结

属性	表示	注意点
`color`	文本颜色	通常使用十六进制，如简写形式 `#fff`
`text-align`	文本对齐	可以设定文字水平对齐方式
`text-indent`	文本缩进	段落道行缩进`2`个字的距离，`text-indent:2em;`
`text-decoration`	文本修饰	添加下划线`underline` 取消下划线`none`
`line-height`	行高	行与行之间的距离

6.`CSS`引入方式

行内样式表
内部样式表
外部样式表

行内样式

内部样式表（内嵌样式表）是写到html页面内部

    <style>
        p {
            font-size: 18px;
            text-indent: 2em;
        }
    </style>

内部样式

<div style="color:red;font-size:"20px">湛江</div>

外部样式

新建一个后缀为.css样式文件，把所有css代码都放入此文件中
在html页面中，使用<link>标签引入这个文件

属性	作用
`rel`	定义当前文档与被链接文档之间的关系，这里需要指定为`stylesheet` 表示被链接的文档是一个样式表文件
`href`	定义所链接外部样式文件的`url`，可以是相对路径，也可以是绝对路径

总结

样式表	优点	缺点	使用情况	控制范围
行内样式表	书写方便，权重高	结构样式混写	较少	控制一个标签
内部样式表	部分结构和样式相分离	没有彻底分离	较多	控制一个页面
外部样式表	完全实现结构和样式相分离	需要引入	最多	控制多个页面