为什么会学习CSS
如果你已经看过我的《学习HTML看这个就》这篇文章。
那么也许你会发现，html只会关注内容的语义，并不会对样式有大的修改能力。那么为了需要让我们的页面更加的美观，所以才有了CSS的出现，所以CSS的作用就是为了修改页面的样式。
CSS最大的贡献：结构与样式相互分离
三种引用方式
行内式（内联样式）
- 语法：
<标签名 style="属性1：属性值1；属性2：属性值2">内容</标签名>
任何的HTML标签都有style属性
内部样式表（内嵌样式）
<head>
<style type="text/css">
选择器{
属性1:属性值1;
属性2:属性值2;
}
<style>
</head>
- type=“text/css” 在html5可省略
- 一般放在head内
- 只适用于当前页面
外部样式表（外链式）
新建一个style.css样式文件
文件结构(无后缀表示文件夹)
|——demo
|———|——css
|———|——style.css
|———|——html
|———|——index.html
标签 {
属性1:属性值2;
属性2:属性值2;
}
在html中链入
<html>
<head>
<!--最好填相对路径-->
<link rel="stylesheet" type="text/css" href="css文件路径">
</head>
</html>
CSS选择器
选择器的作用
找到特定的HTML页面元素
CSS基础选择器
标签选择器
标签 {
属性1:属性值1;
属性2:属性值2;
}
优点： 全部标签统一样式
缺点： 无法设计差异化样式
类选择器
.类名 {
属性1:属性值1;
属性2:属性值2;
}
优点： 可以为元素对象定义单独或相同的样式，可以选择一个或多个标签
规范：
- 类名自定义
- 长名称用中横线来为选择器命名
- 不要纯数字、中文命名，尽量用英文字母表示
拓展
特殊用法：多类名使用
<标签 class="类名1 类名2"></标签>
id选择器
#ID名 {
属性1:属性值1;
属性2:属性值2;
}
id选择器和类选择器的区别
id是唯一的，类是可以重复使用的。
id映射身份证号，类映射姓名
一般的样式用类，js用id
通配符选择器
* 选择所有标签
* {
属性:属性值;
}
会匹配所有元素，但是会降低响应速度
CSS字体样式属性调试工具
font字体
font-size字体大小 一般使用单位：pxfont-family字体p{ font-family ："黑体","微软雅黑"}顺序优先选择font-weight字体粗细- normal 默认值（不加粗的）
- bold 定义粗体（加粗的）
- 100-900 400=normal 700 = bold
font-style字体样式- normal 默认值。浏览器显示一个标准的字体样式。
- italic 浏览器会显示一个斜体的字体样式。
- oblique 浏览器会显示一个倾斜的字体样式。
- inherit 规定应该从父元素继承字体样式。
CSS Unicode字体
使用原因：CSS设置字体可以使用中文，但为了预防乱码，使用unicode编码
| 字体名称 | 英文名称 | Unicode 编码 |
|---|---|---|
| 宋体 | SimSun | \5B8B\4F53 |
| 新宋体 | NSimSun | \65B0\5B8B\4F53 |
| 黑体 | SimHei | \9ED1\4F53 |
| 微软雅黑 | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1 |
| 楷体_GB2312 | KaiTi_GB2312 | \6977\4F53_GB2312 |
| 隶书 | LiSu | \96B6\4E66 |
| 幼园 | YouYuan | \5E7C\5706 |
| 华文细黑 | STXihei | \534E\6587\7EC6\9ED1 |
| 细明体 | MingLiU | \7EC6\660E\4F53 |
| 新细明体 | PMingLiU | \65B0\7EC6\660E\4F53 |
为了照顾不同电脑的字体安装问题，我们尽量只使用宋体和微软雅黑中文字体
font：综合设置字体样式
选择器{
/*font: font-style font-weight font-size/line height font-family*/
font : italic 700 20px "宋体"
}
顺序不能改变 每个属性用空格隔开
不需要的可以省略，但是font-size 和 font-family不能省略
CSS复合选择器
后代选择器（包含选择器）
父级 子级 { 属性：属性值}
<html>
<head>
<title></title>
<style>
/*后代选择器*/
.nav a {
color:blue;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">内部链接</a>
<a href="#">内部链接</a>
<a href="#">内部链接</a>
</div>
<a href="#">外部链接</a>
<a href="#">外部链接</a>
<a href="#">外部链接</a>
</body>
</html>
子元素选择器
只能选择某元素的子元素 用>链接
<html>
<head>
<title></title>
<style>
/*子元素选择器*/
div > strong{
属性:属性值;
}
</style>
</head>
<body>
<div>
<strong>儿子</strong>
</div>
<div>
<p>
<strong>孙子</strong>
</p>
</div>
</body>
</html>
交集选择器
<html>
<head>
<title></title>
<style>
/*交集选择器*/
p.red{
属性:属性值;
}
</style>
</head>
<body>
<p class="red">红色</p>
<p class="red">红色</p>
<div class="red">红色</div>
<div class="red">红色</div>
<p>蓝色</p><p>蓝色</p>
</body>
</html>
并集选择器
<html>
<head>
<title></title>
<style>
/*并集选择器*/
/*p {
color: red;
}
span {
color: red;
}*/
p ,
span{
color: red;
}
</style>
</head>
<body>
<p>红色</p>
<p >红色</p>
<div >红色</div>
<div >红色</div>
<span>蓝色</span>
<span>蓝色</span>
<h1>绿色</h1>
<h1>绿色</h1>
</body>
</html>
