Web前端开发之CSS基础

逃离我推掉我的手 2021-11-19 11:48 339阅读 0赞

# 前言 #

最近在学习牛腩新闻发布系统的时候接触了CSS和HTML，在接触这些知识之后才对制作网页有了一定的认识，先将遇到的部分知识点总结一下。

# **一、CSS简介** #

**CSS（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”）**是一组格式设置规则，用于控制Web页面的外观。通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离。CSS最早是1996年由W3C审核通过并推荐使用的，CSS目前最新版本为CSS 3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。

# 二、 HTML与CSS的互补 #

## 1.HTML发展到今天存在3个主要缺点： ##

第一，由于HTML代码不规范、臃肿，需要足够智能和庞大的浏览器才能够正确显示HTML；

第二，数据与表现混杂，当页面要改变显示时就必须重新制作HTML；第三，不利于搜索引擎搜索。

## 2.HTML也有两个显著的优点： ##

第一，使用Table的表现方式不需要考虑浏览器兼容问题；

第二，简单易学，易于推广。

### 3.CSS的产生恰好弥补了HTML的主要缺点，主要表现在以下几个方面。 ###

CSS用于增强或控制网页样式，并允许将样式信息与网页内容分离。

引用样式表的目的是将“网页结构代码”和“网页样式风格代码”分离开，从而使网页设计者可以对网页布局进行更多的控制。

利用样式表，可以将整个站点上所有网页都指向某个CSS文件，设计者只需要修改CSS文件中的某一行，整个网页上对应的样式都会随之发生改变。

# 三、块级元素和行内元素 #

在CSS里还有特别重要的一个技术点，就是块级元素和行内元素，看看他们的区别在哪里。

## 区别： ##

行内元素与块级函数可以相互转换，通过修改display属性值来切换块级元素和行内元素，行内元素display：inline，块级元素display：block。

行内元素和其他行内元素都会在一条水平线上排列，都是在同一行的；块级元素却总是会在新的一行开始排列，各个块级元素独占一行，垂直向下排列，若想使其水平方向排序，可使用左右浮动（float：left/right）让其水平方向排列。

行内元素不可以设置宽高，宽度高度随文本内容的变化而变化，但是可以设置行高（line-height），同时在设置外边距margin上下无效，左右有效，内填充padding上下无效，左右有效；块级元素可以设置宽高，并且宽度高度以及外边距，内填充都可随意控制。

块级元素可以包含行内元素和块级元素，还可以容纳[内联元素][Link 1]和其他元素；行内元素不能包含块级元素，只能容纳文本或者其他行内元素。

# 四、选择器 #

## １.作用 ##

用选择器规定语法的样式

修改网页直接从公共样式表修改就行，不破坏在html中写的代码。

同一个网页可以多次引用多个样式表文件。

## ２.类型： ##

### （１）标签选择器 ###

标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 或者 元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

**标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式。**

**标签选择器 可以把某一类标签全部选择出来 div span**

### （２）类别选择器 ###

**类选择器以一个点号显示：**

.center {text-align: center}

在上面的例子中，所有拥有 center 类的 HTML 元素均为居中。

在下面的 HTML 代码中，h1 和 p 元素都有 center 类。这意味着两者都将遵守 ".center" 选择器中的规则。

<h1 class="center">
    This heading will be center-aligned
    </h1>
    
    <p class="center">
    This paragraph will also be center-aligned.
    </p>

.searchbtn { /* 搜索按钮的样式 */
    
        background-image: url("../Image/search.png");
    
        background-repeat: no-repeat;
    
        width: 103px;
    
        height: 33px;
    
        border-style: none;
    
        background-color: #fff;
    
    }

.commonfrm {
    
        /* 框架公共样式 */
    
        border: 1px solid #DEDFDE;
    
        float: left;
    
        width: 560px;
    
    }

### （３）ID选择器 ###

**ID选择器以 "\#" 来定义。**

下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：

#red {color:red;}
    #green {color:green;}

#top img {
    
        /* 頂部图片样式 */
    
        float: left;
    
        border-width: 0;
    
        }

#footer { 
        /* 尾部样式 */
        text-align: center;
    
        border-top: 1px solid #D6D7D6;
    
        padding-top: 10px;
    
        clear: left;
    }

下面的 HTML 代码中，id 属性为 red 的 p 元素显示为红色，而 id 属性为 green 的 p 元素显示为绿色。

<p id="red">这个段落是红色。</p>
    <p id="green">这个段落是绿色。</p>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5cDAzMDREZXZpbg_size_16_color_FFFFFF_t_70][]

选择器大全链接

[https://www.runoob.com/cssref/css-selectors.html][https_www.runoob.com_cssref_css-selectors.html]

嵌套选择：span

有唯一性，只能被引用一次

### (4)全局声明\* ###

* { /* 把默认值都设置为0 */
    
        margin: 0;
    
        padding: 0;
    
    }

# 五、链接 #

a:link - 正常，未访问过的链接
    
    a:visited - 用户已访问过的链接
    
    a:hover - 当用户鼠标放在链接上时
    
    a:active - 链接被点击的那一刻

a:link, a:visited {
    
        /* 鼠标未移上去的超链接的样式, 超链接访问后的样式 */
    
        color: #000;
    
        text-decoration: none;
    
    }

a:hover {
    
        /* 鼠标移到超链接上的样式 */
    
        color: #00f;
    
        text-decoration: underline;

# 六、CSS 盒子模型(Box Model) #

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。当我们进入网页的时候按F12就可以看见自己制作的网页的盒子模型，效果图如下。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5cDAzMDREZXZpbg_size_16_color_FFFFFF_t_70 1][]

不同部分的说明：

*  **Margin(外边距)** - 清除边框外的区域，外边距是透明的。
 *  **Border(边框)** - 围绕在内边距和内容外的边框。
 *  **Padding(内边距)** - 清除内容周围的区域，内边距是透明的。
 *  **Content(内容)** - 盒子的内容，显示文本和图像。

[Link 1]: https://www.baidu.com/s?wd=%E5%86%85%E8%81%94%E5%85%83%E7%B4%A0&tn=SE_PcZhidaonwhc_ngpagmjz&rsv_dl=gh_pc_zhidao
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5cDAzMDREZXZpbg_size_16_color_FFFFFF_t_70]: /images/20211119/3ef6fb13b4154dd3bf1d8b86d6b27fd1.png
[https_www.runoob.com_cssref_css-selectors.html]: https://www.runoob.com/cssref/css-selectors.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5cDAzMDREZXZpbg_size_16_color_FFFFFF_t_70 1]: /images/20211119/c98b2777459f42659201bdb4c952095e.png