web前端---CSS 学习（一）

朱雀 2021-11-23 07:14 386阅读 0赞

**在学习牛腩系统的过程中涉及到了CSS的相关知识，CSS是使用较多的而且当下很多面试的公司都需要CSS。**

所以今天小编就带大家来简单了解一下什么是CSS，如何使用CSS。

# 一.什么是CSS： #

** CSS（Cascading Style Sheet）中文译为层叠样式表。**

# 二.CSS的作用： #

**是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。**

**        CSS的引入就是为了使得HTML语言能够更好的适应页面的美工设计**

**        CSS提供丰富的格式化功能，如字体、颜色、背景及整体排版等，Web设计者可以设置不同的样式风格。**

**总之：  用于控制网页的表现，使得表现和内容相分离。**

# 三.使用CSS的好处： #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjMxMDYz_size_16_color_FFFFFF_t_70][]

# 四. 常用的三种样式： #

**  1.行内样式  混合在HTML标记里使用，对每个元素单独定义样式**

这种方式比较简单粗暴，在职业页面的时候需要为很多标签设置<style>属性，导致HTML页面不纯净，文件体积过大。

**2.页面内容样式：在HTML的头部标签<head>与</head>之间添加样式**

<head>
        <style>
            p{color:blue;}
        </style>
    </head>

例子：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjMxMDYz_size_16_color_FFFFFF_t_70 1][]

**3.链入外部样式：把样式表保存为一个样式表文件，然后在页面中使用<link/>标签连接到这个CSS文件**

![20190726085524524.png][]

#  五.CSS的基本语法： #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjMxMDYz_size_16_color_FFFFFF_t_70 2][]

#  六.介绍几种常用的选择器： #

**   **

**1.HTML标签选择器：**

ht{font-size:32px  }

//px:表示像素

例子：

<head>
    <style>
    p{color:blue;}
    h1{color:red;}
    </style>
    </head>
    
    <body>
    <h1>标题1</h1>
    <h2>标题2</h2>
    <p>段落一</p>
    <p>段落二</p>
    </body>

HTML选择器虽然比较方便，但是不好控制，如果我们想把段落一和段落二的格式设置为不同，那么HTML选择器就无能为力。

**2.类选择器：**

定义：
    .redon{color:red;}
    
    应用：
    <style>
    .blueone
    {
    color:blue
    }
    </style>
    
    <body>
    <h1>标题一</h1>
    <p class="blueone">段落一</p>
    </body>

**3.id选择器：**

id选择器可以在html中定位元素，但是相同的id号只能使用一次，不能重复使用

**4.分组选择器：**

h1.h2{color:red;}
    
    <body>
    <h1>标题一</h1>
    <h2>标题二</h2>
    </body>

**5.后代选择器： **

#div1 p a{color:#900;}
    
    /*意思是在ID为div1内的p标签内的连接a标签的文字颜色为红色*/

**6.子选择器：**

div > a{color:#foo;} 将div元素下的a子元素设置为红色

# 七.DIV+SCC中的 ID属性和CLASS属性有什么区别： #

**1、语法区别**

id对应css是用样式**选择符“\#”（井号）**；

class对应css是用样式**选择符“.”(英文半角输入句号)**

<div id="header"></div> 
    <div class="abc"></div> 
    对应CSS应该是：
    #header{...} 
    .abc{...} 
    /* css注释说明：这里以省略号替代CSS样式内容 */

2、使用规定区别

**id属性，只能被一个元素调用**（以“\#”选择符CSS样式在一个页面只能使用调用一次）

class类标记，可以用于被多个元素调用(以“.”选择符命名样式可以一个页面使用多次)

id：在同一个页面，只可以被调用一次，在CSS里用“\#”表示。

class：是类标签，在同一个页面可以调用无数次（没限制的），在CSS里用“.”表示。

# 八.盒子模型：（在这里就简单介绍一下盒子模型的大概架构图，详细内容下一篇博客会介绍） #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjMxMDYz_size_16_color_FFFFFF_t_70 3][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjMxMDYz_size_16_color_FFFFFF_t_70]: /images/20211122/579db59cfa564f68a41a177c691f4dba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjMxMDYz_size_16_color_FFFFFF_t_70 1]: /images/20211122/632e02f9a7e547d687a3aeb067fb58db.png
[20190726085524524.png]: /images/20211122/8882b32d48774902b763fd05e130d48e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjMxMDYz_size_16_color_FFFFFF_t_70 2]: /images/20211122/f2152c7853cb4b4b98fc96058fe63f50.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjMxMDYz_size_16_color_FFFFFF_t_70 3]: /images/20211122/eaf217770c184436b76a204f3911b5f7.png