前端入门 CSS笔记（一）

超、凢脫俗 2023-07-13 13:46 18阅读 0赞

目标：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70]

## 一、CSS简介 ##

CSS的主要使用场景:美化网页，布局页面。

#### 1、HTML的局限性 ####

做结构，显示元素内容，只关注内容的语义，**丑**。

#### 2、CSS-网页美容师 ####

*  CSS即层叠样式表（Caacading Style Sheets）的简称。
 *  **不是编程语言！！是一种标记语言！**
 *  CSS主要用于HTML页面中文本内容（字体、大小、对齐方式等）、图片外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。

#### 3、CSS的语法规范 ####

CSS样式规则：  
由两个主要部分构成：选择器以及一条或多条声明。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70 1]

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CSS语法规范</title>
        <style>
            /* 选择器{样式} */
            /* 即：给谁改样式{改什么样式} */
            p { 
                color:red;
                 /* 修改字体大小 */
                font-size: 12px;
            }
        </style>
    </head>

*  **CSS写在head里面的style标签中**
 *  选择器用于指定CSS样式的HTML标签，或括号内是对该对象设置的具体样式
 *  属性和属性值以键值对形式出现，属性和属性值以：分开。
 *  每一组键值对后“;”来结尾。

#### 4、CSS的代码风格 ####

符合实际开发的书写方式。

##### （1）样式格式书写 #####

1、紧凑格式。//堆在一行  
2、展开格式。  
推荐展开格式。

##### （2）样式大小写 #####

全部使用小写字母，特殊情况除外。

##### （3）空格规范 #####

*  在属性值前，冒号后，保留一个空格。
 *  选择器（标签）和大括号中间保留一个空格。

## 二、CSS的基础选择器 ##

#### 1、CSS选择器的作用 ####

根据不同需求选择标签。

#### 2、选择器分类 ####

选择器分为基础选择器和复合选择器。

##### （1）基础选择器 #####

*  由单个选择器组成
 *  包括：标签选择器、类选择器、Id选择器和通配符选择器。

###### ①标签选择器 ######

按HTML标签名称分类,把某一类标签**全部**选出来。

语法规范：

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

###### ②类选择器 ######

**样式点定义，结构类调用，一个或多个，开发最常用。**

单独选择一个或某几个标签，实现差异化选择。

语法规范：

.类名{ 
    	属性1： 属性值1；
    	......
    }

例子：

//类名为自定义名称，不能用标签名字。
    	//比较长的词组可用“-”分隔
    	//不要使用纯数字、中文命名，尽量使用英文字母。
        <style>
            .red { 
                color: red;
            }
        </style>
    
    	应用：
    	<body>
        <p class="red">我是一个段落</p>
    	</body>

多类名：给一个标签指定多个类名。  
1、多类名使用方式：

//class属性中可写多个类名
    //但中间必须用空格分开
    <div class="red font20">啦啦啦</div>

2、多类名使用场景  
（1）把相同样式放在一个类里，提取共性。  
（2）标签调用公共类，再调用自己独有类。  
（3）修改CSS代码方便

##### ③Id选择器 #####

**样式\#定义，结构Id调用，只能调用一次，别人切勿使用。**  
以id属性来设置选择器，CSS中id选择器以“**\#**”来定义

语法规范：

#id名 { 
    	属性1： 属性值1；
    	......
    }

例子：

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

1.  类选择器可多人使用，类似名字。
2.  id选择器只能使用一次。

##### ④通配符选择器 #####

使用\*定义，选取页面中所有元素。

语法规范：

*{ 
    	属性1： 属性值1；
    	.....
    }

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

总结：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70 2]

## 三、CSS字体属性 ##

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020031215515643.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200312160448376.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200312173006827.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng==,size_16,color_FFFFFF,t_70