第二十二天：css概念及相关语法+table标签相关样式+开发者工机具

最新推荐文章于 2022-12-02 14:44:44 发布

冰镇的热狗

最新推荐文章于 2022-12-02 14:44:44 发布

阅读量188

点赞数 1

分类专栏： # 3、html&css 文章标签： html css html5

本文链接：https://blog.csdn.net/qq_38250571/article/details/109715784

版权

3、html&css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1. CSS相关概念

1.1 定义

HTML组成页面的基本骨架，相当于“素颜”

CSS美化页面，相当于“美颜”

CSS (层叠样式表——Cascading Style Sheets），用于样式设置和网页布局的计算机语言。

eg：调整内容的字体，颜色，大小等样式，设置边框的样式，调整模块的间距等。

层叠：是指样式表允许以多次出现，并相互影响最终共同决定显示效果。

样式：是指丰富的样式外观。拿边框距离来说，允许任何设置边框，允许外边距，也允许内边距。

CSS目前流行的版本是CSS3，也就是最新最强大的版本。

1.2 CSS的组成

CSS是一门基于规则的语言，你可以通过CSS为网页中 特定元素 指定一组 样式规则 。

特定元素和样式规则，分别对应了CSS样式里面的 选择器（selects）和 声明（eclarations）

选择器：通过某种规则选择出来需要指定样式的一组标签

常见的是三种：标签名，class值，id值等多种方式。
声明：形式为属性(property):值(value); ，用于设置指定标签元素的外观形态信息(样式）。
- 属性：指示标签元素的特征，例如font-size，width，background-color。
- 值：每个指定的属性都有一个值，该值指示如何更改这些样式。

格式：

选择器 {
    属性名:属性值 属性值;
    属性名:属性值;
    属性名:属性值;
}

20201115105406818

1.3 学习重点

在学习CSS时，要抓住两个方面：
1. 掌握多种选择器，能够灵活的选择页面元素/标签。
2. 掌握样式的声明，能够使用多种属性来设置多样的效果。

2. 基本语法

2.1 引入方式

2.1.1 内联/行内样式

**位置及作用：**CSS声明在标签的style属性中，仅影响当前这一个标签
格式：<标签 style="属性名:属性值; 属性名:属性值;">内容</标签>
特点：CSS样式代码和HTML标签交杂，代码重复冗余不易维护。

不易维护，所以不用

代码演示：02-引入方式1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引入方式1</title>
</head>
<body>
    <!--内联样式-->
    <h1 style="color: red; font-size: 20px">Hello World</h1>
    <h1>CSS</h1>
</body>
</html>

2.1.2 内部样式

**位置及作用：**CSS样式放在style标签中，通常style标签编写在HTML 的head标签内部

格式：

<head>
    <style>
        选择器 {
            属性名: 属性值;
            属性名: 属性值;
        }
    </style>
</head>

特点：
1. 只对当前页面有效，较易维护。
2. 适用于如果HTML文件较少，且CSS代码不多的情况

代码演示：03-引入方式2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引入方式2</title>
    <!--内部样式-->
    <style>
        div{
            color: red;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div>div1</div>
    <div>div2</div>
</body>
</html>

2.1.3 外部样式

**位置及作用：**将CSS样式写在一个外部的文件中，需要使用样式的页面引入该CSS文档即可

格式：

<head>
    <!--
	rel：表示“关系 (relationship) ”，属性值指链接方式与包含它的文档之间的关系，
		引入css文件固定值为stylesheet。
	href：属性需要引用某文件系统中的一个文件。
	-->
    <link rel="stylesheet" href="css文件">
</head>

特点：
1. 实现了页面框架代码与表现CSS代码的完全分离，使得前期制作和后期维护都十分方便
2. 样式效果对引入该CSS文件的所有页面均生效

代码演示：

外部css文件：01.css

div{
    color: red;
    font-size: 20px;
}

页面文件：04-引入方式3.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引入方式3</title>
    <!--外部样式-->
    <link rel="stylesheet" href="css/01.css"/>
</head>
<body>
    <div>div1</div>
    <div>div2</div>
</body>
</html>

2.1.4 引入方式优先级

就近原则：如果一个页面中同时存在多种CSS引入方式，近的会覆盖远的

理论上：内联样式 >内部样式>外部样式

实际上：内部样式表、外部样式表在同一个文件头部，谁离相应的代码近，谁的优先级高

工作中用法

1、如果同一个css样式分布在两个css文件中，那么样式以后引入的css文件为准。

2、最好将第三方组件的css放在head靠前位置，自定义的css放到head后面位置。

2.2 注释

CSS中的注释为：/* 注释内容*/

格式类似于Java多行注释

2.3 选择器

选择器：通过某种规则选择出来需要指定样式的一组标签

选择器分类

基本选择器
属性选择器
伪类选择器
组合选择器

2.3.1 基本选择器

标签选择器：标签名{}，也叫标签选择器，可以选中同一类指定名称的标签

类选择器：.类名{}，可以选中指定类名的选择器

id选择器：#ID值{}，可以选中指定ID的标签

通用选择器：*{}，选中所有标签

<head>
    <meta charset="UTF-8">
    <title>基本选择器</title>
    <style>

        /*
            优先级：
                大原则：选择器选择的范围越小，优先级越高。
                目前 id选择器优先级最高  *选择器优先级最低
        */
        /*元素/标签选择器*/
        div{
            color: red;
        }

        /*类选择器*/
        .cls{
            color: blue;
        }

        /*id选择器*/
        #d1{
            color: green;
        }

        #d2{
            color: pink;
        }

        /* 统配选择器，选择页面所有的元素 */
        *{
            font-size: 50px;
        }
    </style>
</head>
<body>
    <div>div1</div>

    <div class="cls">div2</div>
    <div class="cls">div3</div>

    <div id="d1">div4</div>
    <div id="d2">div5</div>
</body>

2.3.2 属性选择器

按照属性[值]选择出某些元素

[属性名]{ }：选中有指定属性的所有标签
[属性名=属性值]{ }：选中有指定属性且等于属性值的所有标签
标签名[属性名]：选中指定名称且含有指定属性的标签
标签名[属性名=属性值]{ }：选中指定名称且指定属性的值符合要求的标签
标签名[属性名1][属性名2]{}：选中指定名称且含有指定的两个属性的标签
后面三个是组合选择器，交集选择器。

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        /*
            情况1：根据属性选择
        */
        /*img[alt]{
            border: 5px solid red;
        }*/

        /* 情况2：根据属性&属性值选怎 */
        /*img[alt=xxx]{
            border: 5px solid red;
        }*/

        /* 情况3：根据多个属性选择 */
        img[alt][title]{
            border: 5px solid red;
        }
    </style>

</head>

<body>
    <h1>情况1：可以应用样式：</h1>
    <img src="http://www.itheima.com/images/logo.png" alt="Heima Logo" />

    <hr />
    <h1>情况1、2：可以应用样式：</h1>
    <img src="http://www.itheima.com/images/logo.png" alt="xxx" />

    <hr />
    <h1>情况1、3：可以应用样式：</h1>
    <img title="黑马logo" src="http://www.itheima.com/images/logo.png" alt="Heima Logo" />
    

    <h1>无法应用样式：</h1>
    <img src="http://www.itheima.com/images/logo.png" />
</body>
</html>

2.3.3 伪类选择器

伪类选择器，用于选择处于特定状态的标签。

eg：一些标签中的第一个子标签，或者某个标签的状态（鼠标悬停状态）

格式：标签名:伪类名{ }
常用伪类选择器

标签名:link 匹配所有未被点击的链接
标签名:visited 匹配所有已被点击的链接
标签名:hover 匹配鼠标悬停其上的E元素
标签名:active 匹配鼠标已经其上按下、还没有释放的E元素
标签名:focus 匹配获得当前焦点的E元素
标签名:first-child匹配父元素的第一个子元素

2.3.4 组合选择器

把多个基本选择器组合使用，共同产生效果

后代选择器格式：选择器1 选择器2{}

匹配所有满足选择器1元素的后代中满足选择器2的元素，两者之间用空格分隔

交集选择器格式：选择器1选择器2：

同时匹配两个选择器的标签才会被选中，两者之间没有任何内容

/* 交集选择器 */
p.info{
	color: red;
}

<p class="info"> info</p>
<span class="info"> info-sapn</span>
<p>非info</p>
</body>

并集选择器格式：选择器1,选择器2{}
匹配满足任意一个选择器的标签，两者之间是逗号

2.3.5 选择器优先级

总原则：范围越小越精准，优先级就越高

细节：

最高优先级是 (行内样式，级别为1000)
次优先级是（ID选择器 ,级别为100） #myDiv{color:Red;}
其次优先级是（类选择器，属性选择器，伪类选择器，级别为10）.divClass{color:Red;}
再次优先级是（标签选择器，级别是 1） div{color:Red;}
最后优先级是（通配符选择器，级别是0）*{}
组合选择器的优先级
- 组合选择器，会根据每个普通选择器的优先级进行综合运算
- 组合的方式降低了范围，多个基本选择器的优先级之和，即为该组合的优先级
  .divClass span { color:Red;}
  优先级别就是：10+1=11
- 组合的方式扩大了范围，多个基本选择器的优先级之差，即为该组合的优先级
  .divClass,span { color:blue;}
  优先级别就是：10-1=9

2.4 声明(样式属性)

2.4.1 边框样式

复合属性，可以一次性设置所有边框，也可以分开设置边框。

1592485330865

2.4.2 边框弧度样式

通过使用border-radius属性设置边框角的弧度（盒子的圆角）。虽然能分别设置四个角，但是通常我们使用一个值，来设置整体效果。

边框代码：

<head>
    <meta charset="UTF-8">
    <title>边框样式演示</title>
    <style>
        #d1{
            /*
                设置所有边框：复合属性（background）
            */
            /*border: 5px solid black;*/

            /*设置上边框*/
            border-top: 5px solid black;
            /*设置左边框*/
            border-left: 5px double #f00;
            /*设置右边框*/
            border-right: 5px dotted blue;
            /*设置下边框*/
            border-bottom: 5px dashed pink;

            /* 清除边框 */
            border: none;

            width: 150px;
            height: 150px;
        }

        #d2{
            border: 5px solid red;
            /*设置边框的弧度
                单独设置，从左上开始，顺时针
            */
            border-radius: 75px 50px 25px 0px;

            /* 从左上开始，挨个顺时针设置 50px  25px  50px 25px*/
            border-radius:  50px 25px ;

            /* 从左上开始，看效果图*/
            border-radius:  50px 25px 0px;

            width: 150px;
            height: 150px;
        }
    </style>
</head>
<body>
    <div id="d1"></div>
    <br/>
    <div id="d2"></div>
</body>

2.4.3 文本样式

1592485404956

颜色

该color属性设置所选元素的前景色的颜色
```
p {
  color: red;
}
```
颜色的值，可以由多种方式赋值，常见的有颜色单词，RGB十六进制，例如：

RGB写法也可以简写 #ff0000 = #f00
字体种类

使用font-family属性-这允许您指定一种字体
字体大小

字体大小使用font-size属性设置，可以采用常见单位：

px：像素，文本高度像素绝对数值。

em：1em等于我们要设置样式的当前元素的父元素上设置的字体大小，这是相对数值，了解即可。
文本修饰

text-decoration:设置字体上的文本装饰线。
文本对齐

该text-align属性用于控制文本如何在其包含的内容框中对齐。可用值如下，它们的工作方式与常规字处理器应用程序中的工作方式几乎相同：
- left：左对齐文本。
- right：右对齐文本。
- center：使文本居中。
行高

该line-height属性设置每行文本的高度，也就是行距。

3. 表格标签

1592486361712

3.1 快捷键

快速生成表格：table>tr*5>td*10 + tab

3.2 关于合并行列的注意事项

合并行或者列的时候，需要删除被合并的行或者列

一般不会对基础数据进行合并行和列，可以对表头、汇总等地方合并

3.3 调整表格边框

表格属性：单元格之间的间距 cellspacing="0"

CSS样式属性：边框之间的距离 border-spacing: 0px;

3.5 语义化

为了方便阅读，没有实际的语法意义。

<!-- 
    表头语义标签：<thead>  == <head>
    表体语义标签：<tbody>  == <body>
    表脚语义标签：<tfoot>
-->

3.6 演示代码

<body>
    <!--
        表格标签：<table>
        属性：
            width-宽度
            height-高度
            border-边框
            align-对齐方式

        行标签：<tr>
        属性：
            align-对齐方式

        单元格标签：<td>
        属性：
            rowspan-合并行
            colspan-和并列

        表头标签：<th> 自带居中和加粗效果

        表头语义标签：<thead>  == <head>
        表体语义标签：<tbody>  == <body>
        表脚语义标签：<tfoot>
    -->



    <!--
        border属性，会为表格、表格中每个单元格都添加边框
        cellspacing="0px" 属性 设置单元格的间距，也可以通过css样式border-spacing实现

    -->
    <!--<table width="400px" border="1px" align="center" cellspacing="0px">-->
    <table width="400px" border="1px" align="center" >
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>数学</th>
                <th>语文</th>
            </tr>
        </thead>

        <tbody>
            <tr align="center">
                <td>张三</td>
                <td rowspan="2">男</td>
                <td>23</td>
                <td colspan="2">90</td>
                <!--<td>90</td>-->
            </tr>

            <tr align="center">
                <td>李四</td>
                <!--<td>男</td>-->
                <td>24</td>
                <td>95</td>
                <td>98</td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <td colspan="4">总分数：</td>
                <!--<td></td>
                <td></td>
                <td></td>-->
                <td>373</td>
            </tr>
        </tfoot>
    </table>
</body>

4. 相关样式

1592486370608

4.1 背景图重复

background是复合属性，建议通过background属性设置，不要分拆

4.2 `input`输入框样式

input有两个边界：边框和轮廓。

input输入框，有两个边界
1. border边框，一直存在的边框
2. outline轮廓，获取焦点的时候存在的边框

4.3 `display`：块&行内互转

元素显示
行内元素和块元素之间是可以相互转换的
inline：行内元素(无换行、无长宽)
block：块级元素(有换行)
inline-block：行内块(有长宽)
none：隐藏元素

<head>
    <meta charset="UTF-8">
    <title>样式演示</title>
    <style>
        /*背景图片重复  no-repeat：不重复  repeat-x：水平重复  repeat-y：垂直重复   repeat：水平+垂直重复*/
        body{
            /*background: url("../img/bg.jpg");

            background-repeat: repeat;*/

            /* 通过复合属性设置，兼容性好，写的代码少 */
            /*background: url("../img/bg.jpg") repeat-x;*/
        }

        /*
            轮廓控制 double：双实线   dotted：圆点   dashed：虚线   none：无
            input输入框，有两个边界
             1. border  边框，一直存在的边框
             2. outline 轮廓，获取焦点的时候存在的边框

        */
        input{
            outline: none;
            border: none;
            border-bottom: 1px solid black;
            /*outline: none;*/
        }

        /*
            元素显示
                行内元素和块元素之间是可以相互转换的
                inline：行内元素(无换行、无长宽)
                block：块级元素(有换行)
                inline-block：行内块(有长宽)
                none：隐藏元素
        */
        div{
            border: 1px solid red;
            display: inline-block;
            width: 100px;
        }
    </style>
</head>
<body>
    用户名：<input type="text"/> <br/>

    <div>春季</div>
    <div>夏季</div>
    <div>秋季</div>
    <div>冬季</div>
</body>

开发者工具

打开方式

：F12 或 Ctrl + Shift + I 或 页面鼠标右击 ==>检查

基本使用

7d12e5eb3bbb8d22a9630077dd3b79716ed6867f511ff7685245d5d1adbf34a6

147f2a666e405245abf0907e8f7a0e16ecadfcf032fc4b8a2b3bbd578de137a6

e: none;
border: none;
border-bottom: 1px solid black;
/outline: none;/
}

    /*
        元素显示
            行内元素和块元素之间是可以相互转换的
            inline：行内元素(无换行、无长宽)
            block：块级元素(有换行)
            inline-block：行内块(有长宽)
            none：隐藏元素
    */
    div{
        border: 1px solid red;
        display: inline-block;
        width: 100px;
    }
</style>

用户名：

<div>春季</div>
<div>夏季</div>
<div>秋季</div>
<div>冬季</div>

```

开发者工具

打开方式

：F12 或 Ctrl + Shift + I 或 页面鼠标右击 ==>检查

基本使用

5ea372d5eb0ab954f4b33a72c1b51f66b22ef85daec2f3c9aec8196f1109c886

冰镇的热狗

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
第二十二天：css概念及相关语法+table标签相关样式+开发者工机具

1. CSS相关概念1.1 定义HTML组成页面的基本骨架，相当于“素颜”CSS美化页面，相当于“美颜”CSS (层叠样式表——Cascading Style Sheets），用于样式设置和网页布局的计算机语言。eg：调整内容的字体，颜色，大小等样式，设置边框的样式，调整模块的间距等。层叠：是指样式表允许以多次出现，并相互影响最终共同决定显示效果。样式：是指丰富的样式外观。拿边框距离来说，允许任何设置边框，允许外边距，也允许内边距。CSS目前流行的版本是CSS3，也就是最新最强大的版本。1
复制链接

扫一扫