html中的css - 技术栈

css

（cascading style sheets，串联样式表，也叫层叠样式表）

css规范一般约定：

1.存放CSS样式文件的目录一般命名为style或css。

2.在项目初期，会把不同类别的样式放于不同的CSS文件，是为了CSS编写和调试的方便；在项目后期，出网站性能的考虑会将不同的CSS文件整合到一个CSS文件中，这个文件一般命名为style.css或css.css。

3.推荐样式命名（见表）

4.在CSS中添加注释非常简单，它是以"/"开始，以"/"结尾。注释可以是单行，也可以是多行，并且可以出现在CSS代码的任何地方。一般将注释分为结构性注释和提示性注释。

bash 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>个人博客网站</title>
    <style type="text/css">
        body {font-size: 11pt;} /*设置主体字体大小*/
        /*设置区块宽度 600px、边框 1px 绿色虚线*/
        div {width: 780px; border: 1px green #00f;}
        /*设置 h3 标题的字体、颜色、对齐方式*/
        h3 {font-family: 黑体; font-size: 22pt; color: black; text-align: center;}
        h3.title {font-size: 18pt; font-weight: bold; color: #666; text-align: center;} /*设置 h3 的副标题*/
        /*设置段落文字 11pt；黑色；文本缩进两个字符*/
        p {font-size: 11pt; color: black; text-indent: 2em;}
        p.img {text-align: center;} /*设置段落中的图像居中对齐*/
        p.author {color: blue; text-align: right;} /*设置段落中的作者文字蓝色、右对齐*/
        img {width: 200; height: 160; border: 1px solid; color: skyblue;} /*设置图像的宽、高、边框*/
    </style>
</head>
<body>
    <div>
        <h3>如何快速建立自己的</h3>
        <h3 class="title">个人博客网站</h3>
        <p class="img"><img src="images/blog.jpg"></p>
        <p>各大博客门户网站相继关闭，做一个独立的个人博客网站是将来的趋势。越来越多的个人站长倾向于独立建站，那如何快速建立自己的个人博客网站呢？</p>
        <p>个人博客应该简单、优雅、稳重、大气、低调，采用 HTML5+CSS3 设计，nav 导航实现鼠标悬停渐变显示英文标题的效果，banner 部分，选择大图作为背景，利用 CSS3 中的 animation 属性结合文字图片实现文字从左到右的渐变效果。</p>
        <p class="author">发布：小江</p>
    </div>
</body>
</html>

在 HTML 中，style 标签用于定义文档的样式信息，而 type 属性指定了样式表的类型。对于 CSS，这个类型通常是 text/css。

可用link键入外部的css文件

bash 复制代码

...
<link rel="stylesheet" href="外部样式表文件名.css" type="text/css">
...
</head>

导入外部样式表文件

bash 复制代码

<style type="text/css">
    @import url("外部样式表的文件名1.css");
    @import url("外部样式表的文件名2.css");
    /* 其他样式表的声明 */
</style>

（建议使用link）

css的两个主要特性

1.层叠

层叠（Cascade）是指CSS能够对同一个元素应用多个样式表。（如果有矛盾的样式，会遵循覆盖的原则）

bash 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>多重样式表的层叠</title>
    <style type="text/css">
        div { color: red; font-size: 12pt; }
        p { color: blue; }
    </style>
</head>
<body>
    <div>
        <!-- p元素里的内容会继承div定义的属性 -->
        <p>这个段落的文字为蓝色 12号字</p>
    </div>
</body>
</html>

【说明】显示结果表明"这个段落的文字为蓝色12号字"继承div属性，为12号字；而color属性则依照最后的定义，为蓝色。

2.继承

继承指的是特定的CSS属性可以从父元素向下传递到子元素。这种特性允许样式不仅应用于某个特定的元素，同时也应用于其后代，而后代所定义的新样式，却不会影响父样式。

bash 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>继承示例</title>
    <style type="text/css">
        p {
            color: #00f; /* 定义文字颜色为蓝色 */
            text-decoration: underline; /* 增加下画线 */
        }
        p em { /* 为 p 元素中的 em 子元素定义样式 */
            font-size: 24px; /* 定义文字大小为 24px */
            color: #f00; /* 定义文字颜色为红色 */
        }
    </style>
</head>
<body>
    <h3>CSS 基础</h3>
    <p>CSS 是一组格式设置规则，用于控制 <em>Web</em> 网页的外观。</p>
    <ul>
        <li>表现和内容（结构）分离</li>
        <li>易于维护和<em>改版</em></li>
        <li>更好地控制页面布局</li>
    </ul>
    <ul>
        <li>CSS 设计与编写原则</li>
    </ul>
</body>
</html>

注意事项：

1.如果有多个单词要用引号

2.虽然最后一个属性值后面不需要加；但是最好记得加上

3.在每一行尽量都只描述一个属性

4.可以通过选择器的分组，让相同的选择器享受相同的分组

选择器（Selector）

也被称为选择符，CSS选择器用于指明样式对哪些元素生效。HTML中的所有元素都是通过不同的CSS选择器进行控制的。在CSS中，根据选择器的功能或作用范围，可以将选择器分为元素选择器、class类选择器、id选择器和伪类选择器等。

其中，通配符选择器也称全局选择器，其作用是定义网页中所有元素均使用同一种样式。在编写代码时，用"*"表示通配符选择符。

属性选择器：

bash 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>属性选择器示例</title>
    <style type="text/css">
        img[alt] {border: 3px solid #00F;} /* 作用于任何带 alt 属性的 img 元素 */
        a[href][title] {font-weight: bold;} /* 作用于同时带 href 和 title 属性的 a 元素 */
        a[href="www.taobao.com"][title="淘宝"] {font-size: 18px;} /* 作用于地址指向 www.taobao.com 并且 title 为"淘宝"的 a 元素 */
        a[title~="baidu"] {color: red;}
        *[lang|="en"] {color: blue;}
        p[title^="my"] {color: yellow;}
        p[title$="Test"] {color: green;}
        p[title*="est"] {background-color: aqua;}
    </style>
</head>
<body>
    <p><img src="images/tulip.jpg" alt="郁金香" width="200" height="120" /></p>
</body>
</html>

后代选择器，如：h3 em选择器，这是一个并集选择器，只会对h3里面的em生效

而父子选择器h3>em则是只会对h3下的直接子元素生效

相邻兄弟选择器则会对相邻的后一个"兄弟"进行修改

例子：

bash 复制代码

h3+p{color:red;}

这里会对p进行修改但是仅仅是一个p，

而通用兄弟选择器，会对之后的所有p作出修改：

bash 复制代码

h3～p{color:red;}

id选择器；使用特有id时要加"#"

格式为：E#idValue{property1:value1;property2:value2;...}

（用于为某id单独设置样式）

class选择器：

可以为指定类的html元素单独设计样式
id 选择器示例

CSS3 简介

CSS (Cascading Style Sheet，串联样式表，也叫层叠样式表)，简称为样式表，CSS 是用于定义如何显示 HTML 元素，控制网页样式并将样式与网页内容分离的一种标记性语言。

CSS3 语法基础

CSS 的基本语法由两部分组成，其格式为：

selector{property1: value1; property2: value2;...}

selector 被称为选择器，选择器决定了样式定义需要改变的 HTML 元素。property: value 被称为样式声明，有一条或多条样式时，用冒号隔开，以分号结束，包含在一对大括号"{}"内。

bash 复制代码

```dart
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>id 选择器示例</title>
    <style type="text/css">
        #title {color: red;}
        #sub_title {background-color: aqua;}
        #p_content, #p_title strong {color: blue;}
        p {text-indent: 2em;}
    </style>
</head>
<body>
    <h2 id="title">CSS3 简介</h2>
    <p id="p_content">CSS (Cascading Style Sheet，串联样式表，也叫层叠样式表)，简称为样式表，CSS 是用于定义如何显示 HTML 元素，控制网页样式并将样式与网页内容分离的一种标记性语言。</p>
    <h2 id="sub_title">CSS3 语法基础</h2>
    <p>CSS 的基本语法由两部分组成，其格式为：</p>
    <p id="p_title"><strong>selector{property1: value1; property2: value2;...}</strong></p>
    <p>selector 被称为选择器，选择器决定了样式定义需要改变的 HTML 元素。property: value 被称为样式声明，有一条或多条样式时，用冒号隔开，以分号结束，包含在一对大括号"{}"内。</p>
</body>
</html>

伪类选择器：可以实现交互功能

dart 复制代码

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        a:link {color: blue;} /* 超链接单击之前是蓝色 */
        a:visited {color: red;} /* 超链接单击之后是红色 */
        a:hover {color: green; font-size: large; background-color: aqua;} /* 鼠标指针悬停时，绿色，较大的字体，背景是湖绿色 */
        a:active {color: black; background-color: blueviolet;} /* 按下鼠标按键不松手的时候，字体是黑色，背景是蓝紫色 */
        input:focus {background-color: yellow;} /* 输入框获得焦点时，背景色是黄色 */
        li:first-child {font-size: 22px; background-color: #00FFFF;} /* 列表的第一项元素字体是 22px，背景色是浅蓝色 */
    </style>
</head>
<body>
    <p>应用最为广泛的锚点元素 a 的几种状态（未访问超链接状态、已访问超链接状态、鼠标指针悬停超链接状态和被激活超链接状态）:</p>
    <a href="https://www.taobao.com/">淘宝</a><br />
    <a href="https://www.bilibili.com/">哔哩哔哩</a>
    <form action="login" method="post">
        用户名: <input type="text" name="username" id="username" value="" /><br />
        密码: <input type="password" name="password" id="password" value="" />
    </form>
    <div id="">
        <ul>
            <li>咖啡</li>
            <li>茶</li>
            <li>可口可乐</li>
        </ul>
        <ol>
            <li>面包</li>
            <li>馍</li>
            <li>汉堡</li>
        </ol>
    </div>
</body>
</html>

用于单独处于特殊状态的元素

伪元素选择器是CSS中的一种选择器，用于选择HTML元素的特定部分，而不是整个元素。它通常用于处理那些不是由HTML标签直接表示的内容，比如首行文字、首字母或者生成的内容等。

特点

• 创建虚拟元素：伪元素选择器会创建一个虚拟的元素，这个元素不在文档树中，但可以通过CSS进行样式控制。

• 语法：伪元素选择器以双冒号（::）开头，例如::before、::after等。不过，为了兼容旧版本浏览器，单冒号（:）的写法也被支持。

• 使用场景：常用于在元素的前后插入内容、修饰首行文字或首字母等。

常见的伪元素选择器

• ::before：在元素内容之前插入内容。

• ::after：在元素内容之后插入内容。

• ::first-line：选择元素的第一行内容。

• ::first-letter：选择元素的第一个字母。

示例

以下是一个使用::before和::after的示例：

dart 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div::before {
            content: "前缀：";
            color: red;
        }
        div::after {
            content: " 后缀";
            color: blue;
        }
    </style>
</head>
<body>
    <div>这是主要内容</div>
</body>
</html>

在这个示例中，div::before会在div元素的内容前面插入"前缀："，div::after会在div元素的内容后面插入"后缀"。

伪元素选择器是CSS中非常强大的工具，可以帮助开发者实现复杂的页面布局和动态效果。