- CSS代码写在哪?
- 内联样式表:HTML标签内
<p style=”color:blue;”>落霞与孤鹜齐飞,秋水共长天一色</p>
- 内部样式表:head标签内,title标签后面
<style type=”text/css”>
p {
font-size: 80px;
}
</style>
- 外部样式表:独立的CSS文件中
p {
border-style: solid;
border-width: 1px;
border-color: black;
text-align: center;
}
使用link标签引入到当前文档中
<link rel=”stylesheet” type=”text/css” href=”css/style.css” />
- CSS基本语法
- CSS语法由三部分构成:选择器、属性和值:selector {property: value}
![999d6de9bcd3924381ecd516ff39c8d2.png](https://i-blog.csdnimg.cn/blog_migrate/513676cfd66ee4f370eda4119fd2d106.jpeg)
- CSS选择器:根据id值定位HTML元素
- id选择器
<ul>
<li>普通列表项</li>
<li>普通列表项</li>
<li>普通列表项</li>
<li id=“tuHao”>土豪列表项</li>
<li>普通列表项</li>
</ul>
#tuHao {
font-size: 50px;
}
- 类选择器:如果想将一组元素设定为相同的样式,可为它们设置相同的class属性值,再通过CSS类选择器指定相同的样式
<ul>
<li>普通列表项</li>
<li>普通列表项</li>
<li>普通列表项</li>
<li class=“special”>特殊列表项</li>
<li class=“special”>特殊列表项</li>
<li class=“special”>特殊列表项</li>
<li>普通列表项</li>
<li>普通列表项</li>
</ul>
.special {
font-size: 50px;
}
![a207b562ebaa3969a2395a999a349cd0.png](https://i-blog.csdnimg.cn/blog_migrate/004cefa229d9c5a8c2b71659860f356d.jpeg)
- 选择器分组:不同的元素使用相同的样式时,可以使用“,”隔开,表示并列关系
<h1>标题1</h1