CSS样式表基础与选择器-优快云博客

本文链接：https://blog.youkuaiyun.com/wlc_win/article/details/2579355

本文介绍CSS的基本概念及应用方法，包括行内样式表、内嵌式、链接式和导入样式的使用技巧。同时深入探讨了CSS选择器的种类，如标记选择器、类别选择器和ID选择器，并介绍了集体声明和嵌套使用的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、基本知识

1、 css的概念：

CSS（Cascading Style Sheet），中文译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

基本样式：

利用样式可以方便的去修改页面字体如：

<html>

<head>

<style>

{font-family:"幼圆";

color:#FF0000;

}

</style>

</head>

<body>

<h2>第一个试验</h2>

<p>没有样临时表</p>

</body>

</html>

（1）行内样式表

<p style="color:#0000FF; font-size:36px;">没有样临时表</p>

（2）内嵌式

在head标签间加入

p{color:#00FF66;

font-size:24px;

</style>

再在body间加入<p>没有样临时表</p>

（3）链接式

在1.css中写入以下代码

h2{

color:#0000FF;

}

color:#FF00FF;

text-decoration:underline;

font-weight:bold;

font-size:20px;

}

在网页中加入<link rel="stylesheet" type="text/css" href="file:///E|/futrue/div+css/书中实例/第1章/1.css">（可以直接拖入）

这里有一点要注意，如果css文件在项目中，我们可以用相对路径

（4）导入样式

和上例一样，只是换成<style type="text/css">

<!--

@import url(1.css);

-->

</style>

二、CSS选择器

1、类别选择器

（1）标记选择器：

选择器 {属性：值；属性：值；}

H1 {color: red; font-size: 25px;}

(2)类别选择器：

类别选择器 {属性：值；属性：值；}

.classs {color: red; font-size: 25px;}

类别选择器可以使某一标记不同显示，如：

(3)ID选择器：

Id选择器 {属性：值；属性：值；}

#id {color: red; font-size: 25px;}

与类别选择器类似，所不同的是不能重复使用，

因为javascript寻址方式会造成混乱。

2、选择器的声明

（1）集体声明：

<!--

h1,h2,h3,p{color:#3333FF;}

h2.specil,.special,#one{text-decoration:underline;}

-->

</head>

</style>

在body标签里填入

<h2>黑尔阿斯顿解放军</h2>

<h3>撒佛鬼来电苏澳房间</h3>

<h2 class="specil">速度附加攻击啊</h2>

<p id="one">宁安会给你就爱个</p>

注意集体声明中类的声明相关引用，是在大的标签范围内。

（2）嵌套使用

在head标签里加入：

p b{color:#33FFCC; font-size:36px;}

在body标签里加入：

<p>我盟都是<b>激昂撒杜</b>甫深度发掘苏丹港唉</p>

我盟都是<b>激昂撒杜</b>甫深度发掘苏丹港唉

注意，只有嵌套部分才会发生变化

3、 CSS的继承

在head中写入：

.li1{

color:red;

}

.li2{

color:blue;

}

.li1 ol li{ /* 利用CSS继承关系 */

font-weight:bold; /* 粗体 */

text-decoration:underline; /* 下划线 */

}

注意：li对li1的继承仅限于li1标签内。

在body中写入：

<ul>

<li class="li1">关系1

<ul>

<li>页面父子关系复杂时</li>

</ul>

<ol>

<li>页面父子关系复杂时</li>

</ol>

</li>

<ol>

</ol>

<li class="li2">关系2

<ul>

<li>页面父子关系复杂时</li>

</ul>

<ol>

<li>页面父子关系复杂时</li>

</ol>

</li>

</ul>

div+css （1）