当前位置：首页 > news >正文

CSS语法中的选择器与属性详解

news 2025/6/20 6:45:39

CSS:层叠样式表，Cascading Style Sheets 层叠样式表
内容和样式分离解耦，便于修改样式。
特殊说明：

最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号
为了使用样式更加容易阅读，可以将每条代码写在一个新行内

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS概述</title>
<!--外链的css可以可以影响多个html影响多个页面起作用，作用域大优先级低--><link rel="stylesheet" href="css/style.css">
<!--    style就是css样式的设置,这是内嵌样式，对当前页面的html的结构发生变化--><style>p {font-size: 24px;color: cornflowerblue;font-weight: bolder;}</style>
</head>
<body>
<!--行内css标签优先级 > 内嵌css样式 > 外链css样式 --><p style="color: darkgreen">天使投资早期投资，尤其指的是个人早期投资</p><p>VC:VC是一种将资本投入高成长型企业的私募股权基金。VC往往在创业公司的早期阶段进行投资，同时提供战略和管理方面的支持</p><p>PE:PE是指利用私募基金投资于不公开交易的公司或不上市公司的股权</p>
</body>
</html>

外链代码

 p {font-size: 24px;color: red;font-weight: bolder;}

执行结果
在这里插入图片描述

标签选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>标签选择器</title><style>body{background-color: white;text-align: center;font-size: 12px;}p{font-family: Arial;font-size: 18px;}h1{font-family: '宋体';font-size: 30px;}hr{width: 100px;}</style>
</head>
<body><h1>标题</h1><hr/><p>正文的段落</p>版权所有
</body>
</html>

在这里插入图片描述

类选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>类选择器</title>
</head><!--类选择器和其他标签不一样的是，需要用.开头表示一个类--><style>.one {font-size: 18px;color: darkred;}.two {font-size: 28px;color: aquamarine;}</style>
<body><p class="one">类别1</p><p class="one">类别2</p><p class="two">类别3</p><p class="two">类别4</p>
</body>
</html>

在这里插入图片描述

id选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
<!--    使用id选择器的原因是为了保证唯一性，它的特点是id不重复，style用#开头--><title>id选择器</title><style>#one {font-size: 26px;color: darkgreen;}#two {font-size: 18px;color: darkred;}</style>
</head><body><p id="one">文字1</p><p id="two">文字2</p>
</body>
</html>