CSS基础总结

时间：2022-09-10 08:30:00 1000w100rj电阻

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代码取出来，单独放到