学习CSS看这个就够了(一)
为什么会学习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>
链接伪类选择器
向某些元素提供特殊效果
a:link未访问的链接
a:visited已访问的链接
a:hover 鼠标移动到链接上
a:active 选定的链接
<html>
<head>
<style>
/*未访问的链接样式*/
a:link {
color:red;
/*取消下划线*/
text-decoration:none;
}
/*访问过的链接*/
a:visited {
color:orange;
}
a:hover {
color:blue;
}
</sytle>
</head>
<body>
<a href="https://liyafei.top">李亚飞的博客</a>
</body>
</html>
常用写法：
a{ /*a的标签选择器*/
}
a:hover{ /*链接伪类选择器，鼠标经过时*/
}
相关推荐：
查看10道真题和解析
投递帆软软件等公司10个岗位 >