CSS（一）

最新推荐文章于 2024-10-09 14:44:12 发布

非早起选手

最新推荐文章于 2024-10-09 14:44:12 发布

阅读量122

点赞数 2

分类专栏：前端基础文章标签： css

本文链接：https://blog.csdn.net/zg0601/article/details/120656066

版权

前端基础专栏收录该内容

16 篇文章 5 订阅

订阅专栏

一、CSS（层叠样式表，Cascading Style Sheets）简介

一、CSS（层叠样式表，Cascading Style Sheets）简介

CSS是一种样式表语言，用来描述HTML或XML文档的呈现，CSS描述了如何在屏幕、纸张或其他媒体上显示HTML元素。

作用：①对页面的外观进行美化

②统一网站页面的风格

③实现内容和样式的分离，适合团队开发

HTML、CSS、JavaScript关系：

HTML是网页的结构，CSS是网页的外观，JavaScript是页面的行为。

二、CSS引用方式

①内联样式表：将CSS代码和HTML代码放在同一个文件中，给标签添加style属性，用来设置样式。

例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>内联样式表</title>

</head>

<body>

    <p style="color: blueviolet;">哈哈哈哈哈哈哈</p>

    <p style="color: blueviolet;font-size: 30px;">哈哈哈哈哈哈哈</p>

    <p style="color: red;font-size: 30px;font-family: 楷体;">哈哈哈哈哈哈哈</p>

</body>

</html>

浏览器预览效果如下：

②内部样式表：将CSS代码和HTML代码放在同一个文件中，CSS代码放在<style></style>标签对之中。

例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>内部样式表</title>

</head>

<style>

    #d1{

        color: blueviolet;

    }

    #d2{

        color: blueviolet;font-size: 30px;

    }

    #d3{

        color: red;font-size: 30px;font-family: 楷体;

    }

</style>

<body>

    <p id="d1">哈哈哈哈哈哈哈</p>

    <p id="d2">哈哈哈哈哈哈哈</p>

    <p id="d3">哈哈哈哈哈哈哈</p>

</body>

</html>

浏览器预览效果如下：

③外部样式表：将CSS代码和HTML代码单独放在不同的文件中，通过link标签将HTML和外部的CSS文件链接起来。

例：

html文件：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>外部样式表</title>

    <link rel="stylesheet" href="waibu3.css">

</head>

<body>

    <p id="d1">哈哈哈哈哈哈哈</p>

    <p id="d2">哈哈哈哈哈哈哈</p>

    <p id="d3">哈哈哈哈哈哈哈</p>

</body>

</html>

 

css文件：

#d1{

        color: blueviolet;

}

#d2{

        color: blueviolet;font-size: 30px;

}

#d3{

        color: red;font-size: 30px;font-family: 楷体;

}

浏览器预览效果如下：

三、CSS的样式规则

CSS样式规则语法样式是CSS的基本单位，每个样式规则都是由选择器和声明块两个基本部分组成的。

选择器用于指明样式作用的对象。

声明块定义相应的样式，它包含在一对花括号内，有一条或多条声明组成，而每一条声明则由一个属性和一个值组成，中间用冒号隔开。

（1）字体规则：

表1 字体规则表

属性	说明
font-style	字体样式
font-size	字体大小
font-family	字体
font-weight	字体粗细

（2）列表规则：

表2 列表规则表

属性	说明
list-style-position	项目符号和文本的位置
list-style-image	项目符号图像
list-style-type	项目符号类型
list-style	列表样式

（3）表格规则：

表3 表格规则表

属性	说明
border-color	边框颜色
border-width	边框宽度
border-style	边框线的样式
border-radius	边框的弧度
border-spacing	指定单元格之间的距离,不能是负值
border-collapse	指定单元格的边框是否合并

四、CSS的选择器

CSS选择器是在CSS中定位页面中的标签。

（1）CSS选择器的格式：

选择器
 
{

    样式属性1:取值1;

    样式属性2:取值2;
    ……

}

（2）CSS基本选择器

①标签名选择器：

标签名{

     样式规则(属性): 值;

}

②类选择器：在页面中给标签添加class属性,标签的class属性值可以重复

.类名(标签的class属性值){

    样式规则(属性): 值;

         }

③id选择器：在页面中给标签添加id属性,标签的id属性值不能重复

#id名{

样式规则(属性): 值;

}

④通配选择符：*，代表所有元素

 *{

   样式规则(属性): 值;

   }

（3）CSS属性选择器

①标签名[属性名]：选择含有给定属性的标签

②标签名[属性名=值]：选择含有给定属性值的标签

③标签名[属性名^=值]：选择给定属性值是以某个字符开头的

④标签名[属性名$=值]：选择给定属性值是以某个字符结尾的

（4）CSS关系选择器

相邻兄弟关系选择器就是选中该元素的下一个兄弟元素，相邻选择器的操作对象是该元素的同级元素，用+、~进行连接。

（5）CSS复合选择器

复合选择器就是同时对几个选择器进行相同的操作，不同选择器之间用逗号分隔。

（6）CSS子元素选择器

子元素选择器就是选中某个元素下的子元素，然后对该子元素设置CSS样式，用>进行连接；

（7）CSS伪类选择器

包含6个分类，分别是

动态伪类选择器
目标伪类选择器
语言伪类选择器
元素状态伪类选择器
结构伪类选择器
否定伪类选择器

非早起选手

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录