</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
</body>
</html>
在内部样式表中CSS标签写在<head>
之间的<style>
标签之中。
结构为:选择器 { color:red; font-size:29px; }
选择器为指定的HTML标签,花括号中为该对象设置的具体样式。
选择器
基础选择器
- 标签选择器
- 类选择器
- id选择器
- 通配符选择器
标签选择器
直接选择某一类标签名为选择器,将该类标签全部切换样式。
<style>
<p> {
color: red;
}
</style>
类选择器
单独选一个或者几个标签,差异化选择。
<style>
.类名 {
color: red;
}
</style>
<body>
<p class = "类名">
</p>
</body>
类名自定义,但是不能为标签名。类名不要使用纯数字与中文,可添加横线。
每个标签可以不止一个类名,每个类名都可以被调用。多个类名必须要用空格隔开。提高了泛用性。
class = "name1 name2"
id选择器
以id属性设置id选择器。
<style>
#id名 {
color: red;
}
</style>
<body>
<p id = "id名">
...
</p>
</body>
使用方法类似于类选择器,区别在于id只能被用一次,每个标签的id不能重复。
一般用于页面中惟一的元素上。
通配符选择器
通配符选择器以"*"定义,表示选择页面所有元素标签。
* {
color: red;
}
CSS的引入方式
内部样式表
将所有样式写入style标签内,style标签可以写在html文档中的任何地方,但是通常写在head标签内。
行内样式表(内联样式表)
直接在元素标签中设定style样式,适合修改简单样式。
<div style = "color: red; font-size: 12px;">文本</div>
style为属性,必须使用双引号。
外部样式表
适合样式比较多情况,单独写到css文件中,再引入css文件到html页面。开发最常用。
- 新建.css文件。
- 在html页面中采用link标签引入css文件
<link rel="stylesheet" href="样式表路径">
link标签放在head标签之中。
css复合选择器:
https://blog.csdn.net/Arcofcosmos/article/details/122581153
前端Emmet语法:
https://blog.csdn.net/Arcofcosmos/article/details/122581273?spm=1001.2014.3001.5501
css文本属性:
https://blog.csdn.net/Arcofcosmos/article/details/122585775
css元素显示模式:
https://blog.csdn.net/Arcofcosmos/article/details/122583225?spm=1001.2014.3001.5502
css背景属性:
https://blog.csdn.net/Arcofcosmos/article/details/122585909
css三大特性:
https://blog.csdn.net/Arcofcosmos/article/details/122607054
css网页盒子:
https://blog.csdn.net/Arcofcosmos/article/details/122607468
css标签元素生成阴影:
https://blog.csdn.net/Arcofcosmos/article/details/122625390
css盒子生成圆角边框:
https://blog.csdn.net/Arcofcosmos/article/details/122625358
css网页布局的三种方式:
https://blog.csdn.net/Arcofcosmos/article/details/122625489
css浮动布局特性:
https://blog.csdn.net/Arcofcosmos/article/details/122625520
css清除浮动,父级盒子自适应调整高度:
https://blog.csdn.net/Arcofcosmos/article/details/122625541
css定位布局特性:
https://blog.csdn.net/Arcofcosmos/article/details/122718683
css元素的显示与隐藏:
https://blog.csdn.net/Arcofcosmos/article/details/122722233