本站消息

站长简介/公众号

出租广告位,需要合作请联系站长

gogogo

2686

文章

1342430

访问

+关注

分类

暂无分类

日期归档

2023-06(3)

技术点2：CSS

发布于2020-11-19 21:02 阅读(577) 评论(0) 点赞(30) 收藏(0)

CSS 技术

一、CSS 技术介绍

　　CSS 是「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

二、CSS 语法规则

选择器：选择器决定了哪些HTML元素需要使用此样式；

属性：就是需要改变的样式名，属性名和值使用":"分割，属性声明结束一定要加"；"

多个属性：另起一行，接着写即可。

举例：

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

注：一般每行只描述一个属性

三、CSS的注释

/* 注释内容 */

四、CSS 和HTML 的结合方式

1.第一种

需求1：分别定义两个 div、span 标签，分别修改每个 div 标签的样式为：边框1 个像素，实线，红色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS和HTML结合</title>
</head>
<body>
<!--需求1：分别定义两个 div、span 标签，分别修改每个 div 标签的样式
为：边框1 个像素，实线，红色。-->
<div style="border: 1px solid red;">div1</div>
<div style="border: 1px solid red;">div2</div>
<span>span1</span>
<span>span2</span>
</body>
</html>

效果如下：

以上方式的缺点？

　　1.如果标签多了，样式多了，代码量非常庞大；

　　2.可读性非常差；

　　3.CSS样式没有得到复用；

2.第二种

需求1：分别定义两个 div、span 标签，分别修改每个 div 标签的样式为：边框1 个像素，实线，红色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS和HTML结合</title>
    <style type="text/css">
        /*需求1：分别定义两个 div、span 标签，分别修改每个 div 标签的样式*/
        /*为：边框1 个像素，实线，红色。*/
        div{
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div>div1</div>
    <div>div2</div>
    <span>span1</span>
    <span>span2</span>
</body>
</html>

效果如下：

以上方式的缺点？

　　1. 只能在同一页面内复用代码，不能在多个页面中复用 css 代码。
　　2. 维护起来不方便，实际的项目中会有成千上万的页面，要到每个页面中去修改。工作量太大了。

3.第三种

创建一个hello.css文件，内容如下：

div {
    border: 1px solid red;
}

span{
    border: 1px dashed blue;
}

在HTML页面的head标签中使用link标签引入即可：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS和HTML结合</title>
    <link rel="stylesheet" href="hello.css" type="text/css">
</head>
<body>
    <div>div1</div>
    <div>div2</div>
    <span>span1</span>
    <span>span2</span>
</body>
</html>

效果如下：

五、CSS选择器

1.标签名选择器

格式：
标签名{
     属性名: 值;  
}

需求 1：在所有 div 标签上修改字体颜色为蓝色，字体大小 30 个像素。边框为 1 像素黄色实线。并且修改所有 span 标签的字体颜色为黄色，字体大小 20 个像素。边框为 5 像素蓝色虚线。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS和HTML结合</title>
    <style type="text/css">
        div{
            color: blue;
            font-size: 30px;
            border: 1px yellow solid;
        }
        span{
            color: yellow;
            font-size: 20px;
            border: 5px blue dashed;
        }
    </style>
</head>
<body>
<!--需求 1：在所有 div 标签上修改字体颜色为蓝色，字体大小 30 个像素。边框为 1 像素黄色实线。-->
<!--并且修改所有 span 标签的字体颜色为黄色，字体大小 20 个像素。边框为 5 像素蓝色虚线。-->
    <div>div1</div>
    <div>div2</div>
    <span>span1</span>
    <span>span2</span>
</body>
</html>

效果如下：

2.id选择器

格式：

#id属性值{
    属性名: 值;
}

需求 1：分别定义两个 div 标签。第一个 div 标签定义 id 为 id001 ，然后根据 id 属性定义 css 样式修改字体颜色为蓝色，字体大小 30 个像素。边框为 1 像素黄色实线。第二个 div 标签定义 id 为 id002 ，然后根据 id 属性定义 css 样式修改的字体颜色为红色，字体大小 20 个像素。边框为 5 像素蓝色点线。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS和HTML结合</title>
    <style type="text/css">
        #id001{
            color: blue;
            font-size: 30px;
            border: 1px yellow solid;
        }
        #id002{
            color: red;
            font-size: 20px;
            border: 5px blue dotted;
        }
    </style>
</head>
<body>
<!--需求 1：分别定义两个 div 标签。
第一个 div 标签定义 id 为 id001 ，然后根据 id 属性定义 css 样式修改字体颜色为蓝色，
字体大小 30 个像素。边框为 1 像素黄色实线。
第二个 div 标签定义 id 为 id002 ，然后根据 id 属性定义 css 样式 修改的字体颜色为红色，
字体大小 20 个像素。边框为 5 像素蓝色点线。-->
    <div id="id001">div1</div>
    <div id="id002">div2</div>
</body>
</html>

效果如下：

3.类选择器（class选择器）

格式：

.class属性值{
    属性：值;
}

需求 1：修改 class 属性值为 class01 的 span 或 div 标签，字体颜色为蓝色，字体大小 30 个像素。边框为 1 像素黄色实线。需求 2：修改 class 属性值为 class02 的 div 标签，字体颜色为灰色，字体大小 26 个像素。边框为 1 像素红色实线。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS和HTML结合</title>
    <style type="text/css">
        .class01{
            color: blue;
            font-size: 30px;
            border: 1px yellow solid;
        }
        .class02{
            color: gray;
            font-size: 26px;
            border: 1px red solid;
        }
    </style>
</head>
<body>
<!--需求 1：修改 class 属性值为 class01 的 span 或 div 标签，字体颜色为蓝色，
字体大小 30 个像素。边框为 1 像素黄色实线。
需求 2：修改 class 属性值为 class02 的 div 标签，字体颜色为灰色，
字体大小 26 个像素。边框为 1 像素红色实线。-->
    <div class="class01">div标签1</div>
    <div class="class02">div标签2</div>
    <span class="class01">span标签1</span>
    <span class="class02">span标签2</span>
</body>
</html>

效果如下：

4.组合选择器

格式：

选择器1,选择器2...{
    属性：值;
}

需求 1：修改 class="class01" 的 div 标签和 id="id01" 所有的 span 标签，字体颜色为蓝色，字体大小 20 个像素。边框为 1 像素黄色实线。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS和HTML结合</title>
    <style type="text/css">
        .class01,#id01{
            color: blue;
            font-size: 20px;
            border: 1px yellow solid;
        }
    </style>
</head>
<body>
<!--需求 1：修改 class="class01" 的 div 标签 和 id="id01" 所有的 span 标签，字体颜色为蓝色，
字体大小 20 个像素。边框为 1 像素黄色实线。-->
    <div class="class01">div标签1</div>
    <div class="class02">div标签2</div>
    <span id="id01">span标签1</span>
    <span class="class02">span标签2</span>
</body>
</html>

效果如下：

六、常用样式

1.字体颜色

color：red；
颜色可以写颜色名如：black, blue, red, green 等
颜色也可以写 rgb 值和十六进制表示值：如 rgb(255,0,0)，#00F6DE，如果写十六进制值必须加#。

2.宽度width

　　width: 19px;

宽度可以写像素值：19px；

也可以写百分比值：20%；

3.高度height

　　height: 20px;

高度可以写像素值：19px；

也可以写百分比值：20%；

4.背景颜色

background-color:#0F2D4C

5.字体样式

　　字体颜色：color

　　字体大小：font-size

6.边框

border：1px solid red;

7.div居中

margin-left: auto;

margin-right: auto;

8.文本居中

text-align: center;

9.超链接去下划线

text-decoration: none;

10.表格细线

table{
     border: 1px solid black;
     border-collapse: collapse;  
}
th,td{
     border: 1px solid black;
}

11.列表去除修饰

ul{
    list-style: none;
}

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS常用样式</title>
    <style type="text/css">
        div{
            color: red;
            border: 1px solid yellow;
            width: 300px;
            height: 300px;
            background-color: green;
            font-size: 30px;
            margin-left: auto;
            margin-right: auto;
            text-align: center;
        }
        table{
            border: 1px solid black;
            border-collapse: collapse;
        }
        td{
            border: 1px solid black;
        }
        a{
            text-decoration: none;
        }
        ul{
            list-style: none;
        }
    </style>
</head>
<body>
<div>我是div标签</div>
<table>
    <tr>
        <td>1.1</td>
        <td>1.2</td>
    </tr>
</table>
<a href="http://www.baidu.com">百度一下</a>
<ul>
    <li>1111111</li>
    <li>1111111</li>
    <li>1111111</li>
    <li>1111111</li>
</ul>
</body>
</html>