前端快速入门学习3——CSS介绍与选择器

1.概述

CSS全名是cascading style sheets,中文名层叠样式表。
用于定义网页样式和布局的样式表语言。
通过 CSS，你可以指定页面中各个元素的颜色、字体、大小、间距、边框、背景等样式，从而实现更精确的页面设计。

HTML与CSS的关系：HTML相当于毛坯房，CSS是装修。

CSS 通常由选择器、属性和属性值组成，多个规则可以组合在一起，以便同时应用多个样式

选择器的声明中可以写无数条属性
声明的每一行属性，都需要以英文分号结尾;
声明中的所有属性和值都是以键值对这种形式出现的;

CSS三种导入方式：
1.内联样式（Inline Styles）
2.内部样式表（Internal Stylessheet）
3.外部样式表（External Stylesheet）
三种导入方式的优先级：内联样式>内部样式表>外部样式表
内联样式：

<head><link rel="stylesheet" href="style.css"><style>h2{color: red;font-size: 30px;}</style>
</head>
<body>
<h1 style="color: yellowgreen;">这是一个内联样式</h1>
<h2>二级标题标签，应用内部样式</h2>
<h3>三级标题标签,使用外部样式</h3>
</body>

style.css

h3{color: aqua;font-size: 20px;
}

效果：
在这里插入图片描述

2.选择器

选择器是 CSS中的关键部分，它允许你针对特定元素或一组元素定义样式

(1)元素选择器

<head><style>h1{color: red;font-size: 30px;}</style>
</head>
<body>
<h1>这是一个元素选择器</h1>
</body>

（2）类选择器

<head><style>.highlight {color: red;font-size: 30px;}</style>
</head>
<body>
<h1 class="highlight">这是一个类选择器</h1>
</body>

（3）id选择器

<head><style>#unique {color: blue;font-size: 25px;}</style>
</head>
<body><h2 id="unique">这是一个ID选择器</h2>
</body>

（4）通用选择器

<head><style>* {font-family: KaiTi;font-size: 20px;color: green;}</style>
</head>
<body><h2 id="unique">这是一个ID选择器</h2><p>这是一个简单的HTML示例1。</p><p>这是一个简单的HTML示例2。</p>
</body>

（5）子元素选择器

<head><style>.father > .son {color: yellow;font-size: 20px;}</style>
</head>
<body><div class="father"><p class="son">这是一个子元素选择器</p></div>
</body>

（6）后代选择器

<head><style>.father .grandson {color: orange;font-size: 10px;}</style>
</head>
<body><div class="father"><p class="son">这是一个子元素选择器</p><div><p class="grandson">这是一个后代选择器</p></div>
</body>

（7）兄弟选择器

<head><style>h3 + p {color: pink;font-size: 18px;}</style>
</head>
<body><p>这是一个普通的标签</p><h3>这是相邻兄弟选择器示例</h3><p>这是另一个P标签</p>
</body>

（8）伪类选择器

伪类是用来添加一些选择器的特殊效果。
如链接的不同状态都可以以不同的方式显示

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

注意：在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

注意：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

注意：伪类的名称不区分大小写。

<head><style>#element:hover{background-color: lightblue;}</style>
</head>
<body><p id="element">这是一个伪类选择器</p>
</body>

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/76859.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！