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>
执行结果