CSS简介

文章目录

CSS简介

- - - 1.1 标签选择器
    - 1.2 类选择器
    - 1.3 id选择器
    - 1.4 通配符选择器

1.CSS是什么

CSS它是一种标记语言，CSS主要用于设置页面的文本内容（字体、大小、对齐）、图片的形状（宽度、框架风格、边缘距离）、布局和外观显示。

2.CSS的作用

CSS让我们的网页更加丰富多彩，布局更加灵活自由。
CSS可以美化HTML,让HTML更漂亮，让页面布局更简单。

一. CSS语法基础(1)

1.CSS主要部分结构**: 选择器，声明样式

2.CSS语法规范：

选择器用于指定样式html标签，花括号是对象设置的具体风格。
属性和属性值"键值对"形式出现。
属性是指定对象设置的样式属性，如字体大小，文本颜色等。
在属性和属性值之间使用英文冒号分开。

之间使用多个键值分号进行区分。

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

1. CSS选择器

.选择器的分类

选择器分为基础选择器和复合选择器两个大类。
基础选择器是由单个选择器组成的。
基础选择器包括：标签选择器、类选择器、id选择器、通配符选择器。

2.选择器的作用

选择器就是根据不同需求把不同的标签选择出来。

1.1 标签选择器

html标签名作为选择器

标签选择器可以把某一类标签全部选择出来。
能快速为页面中同一类型的标签统一设置样式。

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

<body>
    <p>段落</p>
    <div>盒子</div>
</body>

p { 
          
            color: aqua;
        }
div { 
          
            color: blueviolet;
        }

1.2 类选择器

使用类名作为选择器

差异化选择不同的标签，单独选1个或者多个标签。
类选择器使用.进行表示，后面紧跟类名
长名称的类名可以使用-来命名

使用英文字母命名

<body>
    <div class="blue">黑色毛衣</div>
    <div class="star-sing">七里香</div>
</body>

 .blue { 
          
            color: blue;
        }
 .star-sing { 
          
            color: chocolate;
        }

类选择器的多类名使用

可以把一些标签相同的样式(公共部分)放到一个类里

这些标签都可以调用这个公共得到类，然后再调用自己独有的类

<body>
    <div class="box red">红色</div>
    <div class="box gree">绿色</div>
</body>

.box { 
          
    width: 100px;
    height: 100px;
}

.red { 
          
    background-color: red;
    font-size: 20px;
}

.gree { 
          
    background-color: green;
    font-size: 30px
}

1.3 id选择器

使用id名作为选择器

id选择器可以为标有特定的HTML元素指定特定的样式
HTML元素以id属性来设置id选择器,CSS中id选择器以#来定义

id属性只能在每个HTML文档中出现一次

<body>
    <div id="pink">迈克尔·杰克逊</div>
    <div>刘德华</div>
</body>

#pink {
    color: pink;
}

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

类选择器就类似名字，一个名字可以有很多人同名。
id选择器就好比每个人的身份证号码，统一不重复。
id选择器和类选择器最大的不同在于使用的次数上。
类选择器在修改样式中使用最多，id选择器一般用于页面唯一的元素上，经常和js搭配使用。

1.4 通配符选择器

通配符选择器使用 * 来定义，表示选取页面中所有的元素(所有的标签)
通配符选择器不需要调用，自动就给所有的元素使用样式
特殊情况下才会用到，例如:清除所有的元素标签的内外边距
```
* { 
          
  margin: 0;
  padding: 0;
}
```

2. CSS字体属性

定义字体系列，大小粗细，文字样式等。
font: weight | size | style | family | …

2.1 font-weight 设置字体粗细

font-weight: nomal(默认值) | boder
font-weight: 400/700
400等同于nomal(默认值) 不加粗
700等同于boder 加粗

开发中推荐使用数字

h2 { 
          
            font-weight: 400;
            /* font-weight: normal; */
        }
.bold { 
          
            font-weight: 700;
            /* font-weight: bold; */
        }

2.2 font-size 设置字体大小

一般情况下可以给body指定整个页面文字的大小
标题标签比较特殊，需要单独指定文字大小
```
body { 
          
	font-size: 18px;
}
```

2.3 font-style 设置字体风格

font-style: nomal(默认值) | italic(斜体)

平时很少给文字加斜体，反而要给斜体标签em改为不倾斜字体

p { 
          
            font-style: italic;
        }
em { 
          
            font-style: normal;
        }

2.4 font-family 设置字体系列

可以使用中文，推荐使用英文，可以定义多个，默认从第一个开始用,没有则下一个
多个单词组成的字体可以用引号

在开发中经常定义在body标签里

h2 { 
          
            font-family: '微软雅黑'
        }
body { 
          
            font-family: '宋体','Microsoft Yahei',tahoma,arial, 'Hiragino Sans GB';
        }

2.5 字体属性的复合写法

font: font-style font-weight font-size font-family
一定要按照这个格式顺序来写，空格分隔
若都是默认值,也必须保留font-size和font-family

font: italic 700 16px 'Microsoft yahei'

3. CSS文本属性

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

3.1 color 设置文本颜色

color: 单词名称 | 16进制 | rgb形式

开发中最常用的是16进制形式

  div { 
          
            /* color: red; */
            color: #ff008c;    
            /* color: rgb(76, 0, 255); */
            
        }

3.2 text-align 设置文本对齐

text-align: left | center | right

文本对齐有三种方式:左对齐，右对齐，居中对齐

h3 { 
          
            text-align: center;
        }

3.3 text-decoration 设置文本装饰

text-decoration: none | underline | overline | line-through

装饰文本:最常用就是下划线和默认无线。上划线和删除线不常用

h1 { 
          
            text-decoration: underline;
        }
a { 
          
            text-decoration: none
        }

3.4 text-indent 设置文本缩进

text-indent: 像素 | 距离
可指定缩进像素,也可指定2em，缩进两个文字大小的距离 em是相对单位，相对当前字体大小来缩进
```
p { 
          
            /* text-indent: 20px; */
            text-indent: 2em;
        }
```

3.5 line-height 设置文本行间距

line-height: 像素
文本行间距:文本高度、上间距、下间距组成

文字行高等于盒子高度可以让盒子内元素垂直居中

   p { 
          
            line-height: 25px;
        }

4. CSS的引入方式

按照CSS样式书写的位置，CSS样式表可以分为三大类: 1.内部样式表(嵌入式) 2.行内样式表(行内式) 3.外部样式表(链接式)

4.1 内部样式表

写到html页面内部。是将所有的CSS代码取出来，单独放到<style>标签中。
<style>理论上可以放到HTML文档的任何地方，但一般会放在<head>中。
通过此种方式，可以方便控制当前整个页面的元素样式设置。
代码结构清晰，但是并没有完全实现结构与样式完全分离。

<!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 { 
           color: blue; } </style>
</head>
<body>
    <div>内部样式表</div>
</body>
</html>

4.2 行内样式表

行内样式表适合修改样式比较简单、比较少的情况下

直接在标签中用style="属性:属性值"

<!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>

    <div style="color: deeppink;font-size: 16px;">幸甚至栽歌以咏志</div>

</body>
</html>

4.3 外部样式表

实际开发都是外部样式表，适合于样式比较多的情况
样式单独写到CSS文件中，之后再把CSS文件引入到HTML文件中使用

新建.css后缀的文件，把css代码写入到文件中

在HTML页面中通过link标签引入.css文件

<!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>外部样式表</title>
    
    <link rel="stylesheet" href="07_外部样式表之css文件.css">
</head>
<body>
    <div>HTML负责写HTML的代码,CSS负责只写CSS的代码</div>
</body>
</html>

5. 调试工具

1.chrom调试工具

打开调试工具 -chrom f12
Elements 元素
左边是html，右边是css

2.使用chrom调试工具

ctrl+滚轮放大代码大小

右边的css样式可以改动数值(键盘上下键或者直接输入)和查看颜色
ctrl +0 复原浏览器大小
如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误
如果有样式，但是样式前面有黄色感叹号，则是样式属性书写错误

二. CSS语法基础(二)

1. Emmet语法

使用缩写形式，提高html,css的编写速度,vscode已经继承该语法

1.1 快速生成html结构语法

1.标签名+tab div tab 2.标签名+数字 div*5 3.父子关系 ul>li 4.兄弟关系 div+span 5.如果带有类名或者id名,直接.pcc 或者 #phh tab键 6.若生成的div类名是由顺序的，可以用自增符号$ 7.如果想要在生成的标签内部写内容，则{}

1.2 快速生成css结构语法

1.可以写属性提示后tab 2.可以变态快速，如:w100 h100 lh26

1.3 快速格式化代码的使用

1.格式化文档-shift+alt+f 2.设置-搜emmet.include 3.settings.json【用户】下配置: "editor.formatOnType":true, "editor.formatOnSave":true 设置一次，以后crl+s保存自动就格式化了

2. 复合选择器

复合选择器是建立在基础选择器之上的
更高效、准确的目标元素(标签)
由两个或者多个基础选择器，通过不同的方式组合而成
常用复合选择器包括:后代选择器，子元素选择器，并集选择器，伪类选择器等

2.1 后代选择器

有包含关系,层层选择

任何形式的选择器都可以作为后代选择器

ul li { 
          
            color: red;
        }

ul li a { 
          
            color: green;
        }

.ol2 li a { 
          
            color: blueviolet;
        }

2.2 子元素选择器

只能选择最近一级子元素

div>a { 
          
            color: red;
        }

2.3 并集选择器

可以选择多组标签，同时为他们定义相同的样式。
通常用于集体声明。

任何形式的选择器都可以作为并集选择器。

div, p { 
          
            color: red;
        }

div, p, .home li { 
          
            color: red;
        }

2.4 伪类选择器

用于向某些选择器添加效果，比如给链接添加效果
用 : 来表示

1. 链接伪类选择器

a:link 选择未访问过的连接
a:visited 选择所有已访问过的链接
a:hover 鼠标位于其上的链接

a:active 选择活动链接(鼠标按下未弹起的链接)

a:link { 
          
            color: #333;
            text-decoration: none;
        }

a:visited { 
          
            color: orange
        }

a:hover { 
          
            color: aqua;
        }

a:active { 
          
            color: red;
        }

开发中最常用的格式

a { 
          
	text-decoration: none;
        }
a:hover { 
          
	color: aqua;
	text-decoration: none;
        }

链接伪类注意事项: 1.lvha顺序 2.因为链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式

2. focus伪类选择器

用于获得光标的表单元素

input:focus { 
          
            color: aqua;
        }

3. CSS的显示模式

3.1 块元素

常见的块元素:h1~h6,div,p,ul,ol,li等

块元素的特点:

独占一行
可控制高度，宽度，内外边距
宽度默认是容器(父级宽度)的100%

是一个容器及盒子，里面可以放行内或者块级元素

div { 
          
            width: 300px;
            height: 300px;
            background-color: darkorange;
        }

注意: 文字元素不能放块级元素,如p元素不能放div元素。

3.2 行内元素

常见的行内元素有: a, label, b, em, i, del, s, ins, u, span等

行内元素的特点:

相邻行内元素在一行上，可以显示多个
宽、高设直接置是无效的
默认宽度就是它本身内容的宽度

行内元素只能容纳文本或其他行内元素

label { 
          
            background-color: blueviolet;
        }

span { 
          
            background-color: orangered;
        }

注意: 1.链接里面不能再放链接 2.特殊情况链接<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全

3.3 行内块元素

常见行内块元素: input, img, td, textarea

同时具有块元素和行内元素的特点

行内块元素的特点:

和相邻行内元素在一行上，但是他们之间会有空白缝隙。一行可显示多个
默认宽度就是它本身容器的宽度

宽度，行高，内外边距都可以设置

  input { 
          
            width: 249px;
            height: 35px;
        }

3.4 显示模式转换

特殊情况下一个元素的显示模式需要另一种模式的特性时比如想让<a>触发范围–元素模式转换

转换为块元素: display: block
转换为行内元素: display: inline

转换为行内块元素: display: inline-block

a { 
          
            width: 300px;
            height: 200px;
            display: block;
        }

4.CSS背景属性

背景属性可以设置背景颜色、背景图片、背景平铺，背景图片位置、背景图像固定等

background: background-color | background-image | background-repeat | background-attachment | background-position

4.1 设置背景颜色

background-color: transparent(默认透明) | color

div { 
          
            background-color: pink;
        }

4.2 设置背景图片

background-image: none(默认) | url(url)

div { 
          
            background-image: url(images/logo.png);
        }

4.3 设置背景平铺

background-repeat: repeat | no-repeat | repeat-x | repeat-y

repeat 平铺(默认) norepeat (不平铺) repeat-x (沿x轴平铺) repeat-y (沿y轴平铺) 可以既有背景颜色又有背景平铺
```
div { 
          
            background-repeat: no-repeat;  
        }
```

4.4 设置背景图片位置

background-position: x y

可以使用方位名词或者精确单位 length 百分数|由浮点数字和单位标识符组成的长度值

1.参数是方位名词

background-position: top | center | bottom | left |right

如果指定的两个值都是方位名词，则两个值前后顺序无关如left top和 top left 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中
```
div { 
          
            background-position: left center;
        }
```

2.参数是精确单位

background-position: px px

第一个肯定是x坐标，第二个一定是y坐标

如果只指定一个数值，那么数值一定是x坐标，另一个默认垂直居中

div { 
        
            background-position: 100px 10px;
            /* background-position: 100px; 只指定一个值，数值一定是x坐标，y坐标默认为center*/
        }

3.参数是混合单位

background-position: px 方位名词

如果指定的两个值是精确单位和方位名词的混合使用，则第一个值是x坐标，第二个值是y坐标
```
 div { 
          
            background-position: 100px center;
        }
```

4.5 设置背景图像固定

background-attachment属性设置背景图像是否是固定或者随着页面的其余部分滚动 background-attachment后期可以制作视差滚动效果

background-attachment: scroll(默认)|fixed

scroll 背景图像随对象内容滚动 fixed 背景图像固定

body { 
          
            background-attachment: fixed;
            /* background-attachment: scroll; 滚动(默认)*/
        }

4.6 背景属性复合写法

background: 背景颜色背景图像背景平铺背景图像滚动背景图片位置

一般按照此约定的顺序

body { 
        
            /* 背景属性复合写法 */
            background: pink url(images/bg.jpg) no-repeat fixed top;

        }

4.7 背景半透明

CSS3为我们提供了背景颜色半透明的效果

div { 
        
           background: rgba(0, 0, 0, 0.2);      
        }

最后一个参数是alpah透明

标签： 1000w100rj电阻

锐单商城拥有海量元器件数据手册、 IC替代型号，打造电子元器件IC百科大全！

CSS基础总结

文章目录

最近热搜

历史搜索 清除历史记录

历史搜索清除历史记录