CSS-网页美容师（一）
css的基础结构
<style>
需要改的标签 {
需要改的样式;
需要改的样式;
}
</style>
选择器
选择器分为：
标签选择器，类选择器，id选择器
标签选择器
<style>
p {
color: red;
}
</style>
<p>
之后所有段标签里的文字变为红色
</p>
类选择器
类选择也分为单类选择器和多类选择器，类选择器是项目中最常用的选择器
<style>
.red {
color:red;
}
.big {
font-size: 100px;
}
</style>
<!--在标签后写出class来加入某一类或某几类，从而得到类的效果-->
<p class="red big">
</p>
id选择器
前面加#号来声明为id
<style>
#red {
color: red;
}
</style>
<div id="red">
此时该div中的文字变成红色
</div>
整体代码运用展示:
<style>
/* 标签选择器 */
p {
color: pink;
}
/* 类选择器 */
.red {
color: red;
}
.big {
font-size: 100px;
}
/* id选择器 */
#green {
color: green;
}
</style>
<body>
<p class="big">Hello World</p>
<div class="red big">你好，世界</div>
<span id="green" class="big">Hello World</span>
</body>
通配符选择器
通配符选择器用“*“来定义，它表示选取页面中的所有元素
<style>
* {
color: red;
}
</style>
此时所有标签下的文字变成红色
选择器总结
CSS字体属性
字体属性用于定义字体系列，大小，粗细和文字样式
字体系列
<style>
p {
font-family: "微软雅黑", "mircosoft Yahei"
}
</style>
为了兼容性，尽量使用英语来写。其中单引号和双引号都是可以的
字体大小
<style>
body {
font-size: 50px;
}
</style>
- px是网页最常用的单位，即像素
- 谷歌浏览器默认文字大小为16px
- 不同浏览器的默认文字大小可能不一样，所以我们编写时尽量给一个明确的值
- 可以给body指定整个页面的大小
- 标题标签特殊，需要单独指定大小
字体粗细
<style>
body {
font-weight: lighter;
}
</style>
关于不同的粗细，数量多难记忆，需要时可用网站查阅
实际开发中，更推荐用number（100~900 无需单位）
<style>
body {
font-weight: 200;
}
</style>
正常粗细为400，加粗为700
字体样式
<style>
body {
font-style: italic;
}
</style>
此时页面中的文字变为斜体
normal可以让倾斜的字体不倾斜
整体展现
<style>
body {
font-family: "Mircosoft Yahei";
font-size: 50px;
font-weight: bolder;
font-style: italic;
}
</style>
<body>
<p>1376666</p>
<p>电子烟我这最靠谱</p>
</body>
</html>
文本属性
文本颜色
常规写法上述案例已经多次出现
以下再讲解一种十六进制写法（因为我们实际使用中常使用吸管去吸取颜色）
<style>
body {
color: #ff0000;
}
</style>
此时文本都变成了红色
tip：16进制数前记得叫#号
文本对齐
<style>
body {
text-align: center;
}
</style>
此时全部文字居中对齐
文本装饰
<style>
p {
text-decoration: underline;
}
</style>
此时段中文字全部加入下划线
重点学习加入下划线和取消下划线（比如怎样去给链接取消下划线–使用none）
文本缩进
给每段的第一行进行缩进
<style>
p {
text-indent: 2em;
}
</style>
通常每个段落前缩进2em（em为当前元素一个文字的大小）
行间距
即行与行的距离
<style>
p {
line-height: 16px;
}
</style>
默认高度为16px
多文本可以尝试用25px，此时观感较好
文本属性总结
CSS的引入方式
- 行内样式表（行内式）
- 内部样式表（嵌入式）
- 外部样式表（链接式）
行内样式表
之前我们所写的都是内部样式表，在html页面内部写样式，但是是单独写到style标签内部。style通常会放在head中，不强制要求。
内部样式表
<dev style="color: red;font-size:50;">内部样式表</dev>
书写复杂，不推荐大量使用，只有样式较少较简单时使用
外部样式表
实际运用最常见的，最推荐使用
核心是将样式写到css文件，之后再将css引入
引入外部样式表的步骤
- 新建一个.css后缀文件，把所有css代码放入此文件中
- 在HTML页面中，引入.css标签
<link rel="stylesheet" href="#">
引入方式总结
Chrome调试工具
F12打开工具
Emmet语法
该语法可以帮助程序员更快的书写代码
HTML
熟练后可提高写代码效率
CSS
text-align: center==tac
text-indent==ti
width 100px==w100
height==h
如上
CSS的复合选择器
后代选择器
任意基础选择器即可以为标签选择器，类选择器和id选择器
<style>
ol li {
color: pink;
}
</style>
<ol>
<li>我变成粉红色啦</li>
<li>我变成粉红色啦</li>
<li>我变成粉红色啦</li>
</ol>
<ul>
<li>我还是黑色哦</li>
<li>我还是黑色哦</li>
<li>我还是黑色哦</li>
</ul>
子元素选择器
并级选择器
伪类选择器
当鼠标放在文字上文字变换颜色，就是通过伪类选择器变换的
实际开发常用的操作
<style>
a {
color: black;
}
a :hover{
color: skybule;
}
</style>
:focus伪类选择器
针对input表单来使用
复合选择器总结
766
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
