CSS学习总结

最新推荐文章于 2022-07-10 01:08:38 发布

竹叶戏雨

最新推荐文章于 2022-07-10 01:08:38 发布

阅读量1.2k

点赞数 4

分类专栏： web积累文章标签： CSS

本文链接：https://blog.csdn.net/qq_39370658/article/details/86517797

版权

总结由达内学习的笔记和菜鸟教程CSS板块(不包括CSS3)组成。

一.CSS概述

1.CSS：层叠样式表（Cascading Style Sheets）用于渲染HTML元素标签的样式，美化网页的一门技术。

使用CSS设置样式，可以让展示数据的HTML代码和设置样式的CSS代码进行分离，可以增强网页的展示能力

2.CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:

选择器通常是需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性（property）是希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

二.在HTML里引入CSS

1.通过内联样式 (style属性)

第一种方式是通过标签上的style属性为当前元素设置CSS样式

如果CSS样式属性非常多，就会造成页面结构的混乱，而且代码得不到复用，因此这种方式不推荐大量使用。

<!--

    1.通过标签上的style属性给div设置样式

    边框 1px solid red

    字体大小 40px

    背景颜色为 pink

-->

<div style="border:1px solid red;font-size:40px;background:pink">

    这是一个div...

</div>

2.通过内部样式表 (sytle标签)

第二种方式是通过head标签内部的style标签，书写CSS代码来引入CSS样式。

<!-- 2.通过style标签给span设置样式如下：

    边框: 2px solid cyan

    字体大小: 35px

    字体加粗

-->

<span>span111</span>

<span>span222</span>

<span>span333</span>

Css引入:

<head>

    <style type="text/css">

       /* 可以选中元素进行修饰 */

       span{

           border: 2px solid cyan;

           font-size:35px;

           font-weight:bolder;

       }

    </style>

</head>

这种方式将所有的CSS属性放在一个style标签内部统一管理，可以将设置样式的CSS代码和展示数据的HTML代码进行初步的分离。

3.通过外部样式表 (link链接)

当CSS代码特别多的时候，可以将CSS代码统一写在一个独立的文件中，文件的后缀名为.css，在HTML文件中引入CSS文件即可。

在HTML中引入css文件

<link rel="stylesheet" href="css/demo.css"/>

4.多重样式

如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。

例如，外部样式表拥有针对 h3 选择器的三个属性：

h3
{
    color:red;
    text-align:left;
    font-size:8pt;
}
而内部样式表拥有针对 h3 选择器的两个属性：

h3
{
    text-align:right;
    font-size:20pt;
}
假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是：

color:red;
text-align:right;
font-size:20pt;

即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。

5.多重样式优先级

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

优先级顺序

下列是一份优先级逐级增加的选择器列表：

通用选择器（*）
元素(类型)选择器
类选择器
属性选择器
伪类
ID 选择器
内联样式

<head>
    <!-- 外部样式 style.css -->
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <!-- 设置：h3{color:blue;} -->
    <style type="text/css">
      /* 内部样式 */
      h3{color:green;}
    </style>
</head>
<bod

最低0.47元/天解锁文章

竹叶戏雨

关注

4
点赞
踩
24

收藏

觉得还不错? 一键收藏
0
评论
CSS学习总结

总结由达内学习的笔记和菜鸟教程CSS板块(不包括CSS3)组成。一.CSS概述1.CSS：层叠样式表（Cascading Style Sheets）用于渲染HTML元素标签的样式，美化网页的一门技术。使用CSS设置样式，可以让展示数据的HTML代码和设置样式的CSS代码进行分离，可以增强网页的展示能力2.CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明: ...
复制链接

扫一扫