CSS选择器以及引入方法（一）

最新推荐文章于 2022-07-18 12:04:32 发布

不如不说不快乐

最新推荐文章于 2022-07-18 12:04:32 发布

阅读量753

点赞数

分类专栏： web开发

本文链接：https://blog.csdn.net/caohui1994/article/details/80786732

版权

web开发专栏收录该内容

11 篇文章 0 订阅

订阅专栏

CSS介绍

CSS是由W3C发布的，功能在于调节网页样式。CSS有两部分组成，选择器和声明。声明中则包含属性以及属性值。

选择器不仅可以使元素标签，也可以是类、ID（元素的唯一标示）、或是元素的某种状态，也可以作为通配选择器使用。

通配选择器

*{CSS属性:属性值;}

*表示页面中的所有HTML标签

元素选择器

元素标签有p、h1、table等
如下：

body,p,td,th,div,dl,ul,ol{
font-family:宋体;
font-size:12px;
color:#999999;
}

其实理论上p,td,th,div,dl,ul,ol这些标签都要定义在body中，所以只定义body都样式就可以了。

类选择器

类选择器定义了一类样式，注意定义类选择器时前面要加“.”

.rd{color:black;}
.ft01{font-size:12px;}

然后使用标签中的class属性引用类选择器。

<p class="rd">段落样式</p>
<h1 class="rd">标题样式</h1>

ID选择器

ID的属性值在文档中具有唯一性，ID选择器定义的样式比类选择器更高。
ID选择器定义时要注意在ID前加“#”

伪类选择器

伪类也属于选择器的一种，
包括:firstchild、:link、:visited、:hover、:active、:focus和:lang等。

群选择器

h1,h2,h3,p,span{
font-size:12px;
font-family:"宋体";
}

属性

有哪些属性呢，下面列出一部分

body{
    font-family:微软雅黑;
    font-size:14px;
    color:#FFF;
    line-height:30px;
    font-weight:bold;
    background-color:#1D1D1D;
    background-image:url(image/113301.jpg);
    background-repeat:repeat-x;
    margin:0px;
    padding:0px;
}

行内CSS

<p style="font-family:宋体;font-size:12px;color:#CCCCCC"></p>

内部CSS样式

<head>
    <style type="text/css">
    </style>
</head>

导入外部CSS样式表

<style type="text/css">
@import url("外部样式表文件url");   
</style>

url可以是相对路径也可以是绝对路径

导入外部CSS和链接外部CSS类似，不过方式不同：
导入外部CSS在HTML启动时就会被导入HTML文件，所以实质和内部CSS样式一致；
链接外部CSS只有在调用该CSS样式时才会引用。

链接外部CSS

<link rel=“stylesheet” type=“text/css” href=“外部CSS样式表文件”/>

Q1. span标签有什么用

不如不说不快乐

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS选择器以及引入方法（一）

CSS介绍CSS是由W3C发布的，功能在于调节网页样式。CSS有两部分组成，选择器和声明。声明中则包含属性以及属性值。选择器不仅可以使元素标签，也可以是类、ID（元素的唯一标示）、或是元素的某种状态，也可以作为通配选择器使用。通配选择器*{CSS属性:属性值;}*表示页面中的所有HTML标签元素选择器元素标签有p、h1、table等如下：body,p,t...
复制链接

扫一扫