CSS(Cascading Style Sheets)：层叠样式表，它用来控制HTML标签的样式，在美化网页中起到非常重要的作用
CSS的编写格式是键值对的形式
格式：属性名 : 属性值
color:blue;
background-color:green;
font-size:15px;
CSS的3种使用形式
行内样式（内联样式）：在标签的style属性中书写（标签都有style属性）
!-- 行内样式 -->
<div style="font-size: 25px; color: green; background-color: lightgrey;">div容器</div>
<h2 style="color: blue;border: 1px double black;">Cascading Style Sheets</h2>
业内样式：在本网页的style标签中书写（因为body标签用来描述内容和结构，其它东西都放到head中,所以将业内样式写在head标签内）
<meta charset="UTF-8">
<title>CSS页内样式</title>
<style>
/* 标签选择器 /
/ div文字颜色为蓝色,字体大小25,边框为红色单边框 /
div{
color: blue;
font-size: 25px;
border:2px solid red;
}
/ p文字颜色为橘色,字体17,边框为紫色双边框宽度为5 */
p{
color: orange;
font-size: 17px;
border:5px double blueviolet;
}
</style>
</head>
<body>
<div>div容器div容器div容器div容器div容器</div>
<div>div容器div容器div容器div容器div容器</div>
<p>段落段落段落段落段落段落段落段落</p>
</body>
外部样式：在单独的CSS文件中书写，然后在网页中用link标签进行引用
-
先新建一个css文件，在css文件内书写我们需要的样式
br><head> <meta charset="UTF-8"> <title>CSS外部样式</title> <!-- 引入外部样式 --> <link rel="stylesheet" href="css/index.css"> </head> <body>
CSS常用选择器
属性：通过属性的复杂叠加，才能做出漂亮的网页
选择器：通过选择器找到对应的标签设置样式
标签选择器：根据标签名找到对应的标签
<style>
/* 标签选择器 /
/ div文字颜色为蓝色,字体大小25,边框为红色单边框 */
div{
color: blue;
font-size: 25px;
border:2px solid red;
}
</style>
类选择器
/* 类选择器 */
.test1{
color: red;
font-size: 30px;
border:5px double green;
}
<div class="test1">类选择器</div>
<p class="test1">类选择器</p>
id选择器
<div id="main">id选择器</div>
并列选择器
/* 复合选择器(且,前面不可以是ID选择器) */
p.test1{
color: yellow;
}
后代选择器
/* 直接后代选择器 */
div > p{
font-size: 90px;
}
网友评论