认识学习CSS
1-1 HTML内部添加样式
添加声明
<input type='text' placeholder='手机号码' style=''>
1-2 字体大小/字体粗细
CSS中，样式是由属性 和 值 组成
格式为 属性:值;
字体大小
格式 font-size:36px;
字体加粗
格式 font-weight:100;
400-->normal(正常粗细) 200-->lighter(细) 700-->bold
1-3 字体颜色/文字间对其方式
颜色
1、英文字母
如color: black; color: blue; color: red;
2、十六进制颜色
由#开头每个数字范围为00-FF
如color: #DAE8FC; color: #D5E8D4;
3、reb形式
是由red、green、blue三者决定，每种颜色的范围为0~255
如color: rgb(253,217,106);
4、rgba形式
比rgbd多了个a,a是透明度Alpha，a在0-1之间 0.4可以写成.4
如
color: rgba(253,217,106,1.0)
color: rgba(253,217,106,0.3);
注意
建议使用十六进制表达方式
调试时可以用英文字母形式，初期的调试就是随便设置一个颜色，查看区块是否存在等，在合模型中我们会遇到
设置文字透明度或者背景透明度，就用到rgba形式
文字居中/居左/居右
设置文字对齐格式
text-align: center; 文字居中对齐
text-align: left;文字左对齐
text-align: right;文字右对齐
1-4 文字行高/字间距/字体
行高
行高的设置格式：line-height: 30px;
作用：1、改变段落中行与行之间的距离
2、使文字上下居中，先写text-align: center; 再将line-height设置与height设置一致
字间距
指的是 字母与字母之间，文字与文字之间设置字间距的格式：letter-spacing: 30px;
字体
如宋体、隶书等
设置字体方式 关键字+值
font-family: sans-serif;
font-family: 'Goudy Bookletter 1911', sans-serif, 'Gill Sans Extrabold';
电脑加载时会从第一个字体开始找，第一个没有依次往后找
字体写法注意事项：
多个字体之间用英文逗号 , 隔开
字体名称见有空格时，要加引号，单引号双引号都可以
中文字体名称要用空格：'宋体'
2-1 CSS的三种引入方式
行内样式
为了减少标签数量，做到简洁化，引入内部样式
内部样式
将CSS样式抽出来
在head标签里声明一个< style>< /style> 标签
将样式放到 style 标签里面
相同的标签，写在相同的大括号里面 {},大括号前加上标签名
<style>
p{
font-size: 16px;
color: #FFFFFF;
}
</style>
外部样式
当添加样式标签较多时，会出现头重脚轻
引入css存放样式代码
建一个index.css文件
写入< style>
建立HTML和CSS文件的联系，即是 link标签引入CSS文件
<link rel='stylesheet' type='text/css' href='index.css' />
补充知识
CSS内部注释为
/* */
外部注释 直接在.css文件中注释
link
rel属性rel属性规定了当前文档与被链接文档之间的关系，但是rel属性的stylesheet值被所有浏览器支持，也就是说你只要记住一个值即可。
stylesheet的意思就是文档的外部样式表。
2.type属性 type属性规定了被链接文档的 MIME（多用途互联网邮件扩展类型）类型，type属性对应的最常见的值就是text/css，该类型描述样式表.
3.href属性href 属性后跟的要引入的链接地址
2-2 相对路径/绝对路径
绝对路径
如一张图片位置(明确位置)
<img src='E:ook网页布局g.jpg' />
相对路径
定义:所谓相对路径就是相对于文件自身位置，去寻找要引入的资源文件
text文件下有index.html 和 index.css
当前在index.html引入index.css就要用 ./当前文件夹目录
../:回到上一级文件夹目录
../返回上一层，如果有多层就用多个../
css/表示进入css文件
2-3 常用选择器
标签选择器
即定义一次，多次使用
分为原始样式 内部样式 外部样式
选择器的层叠性
在一次标签后，继续添加标签会覆盖前一个标签
类选择器
给一段文字赋予特定的属性
定义
<p class='article'>
class是定义类的关键字，article是类名，类名可以任意，但是要符合规范
</p>
使用
.article {
color: red;
font-size: 14px;
}
内部样式要写在< style> < /style>之间
外部样式直接写在.css文件
一个标签可以添加多个类名，类名间用空格
<p class='common color font-size'>
common设置通用样式，color设置特殊颜色，font-size设置特殊字体大小
</p>
id选择器
定义
<p id='p-item'>这是一段文字</p>
用法
#p-item {
font-size: 24px;
font-weight: 400;
}
注意
1、id选择器只能出现一次
2、id只能有一个标签
2-4 高级选择器
1.后代选择器
p a ---- 选择所有p标签内的所有a标签
书写规则：用空格隔开
/* 选择id名为password的标签内部所有类名为box的元素内部的所有p标签 */
#password .box p{}
/* 选择所有p标签内部的所有span标签 */
p span{}
/* 选择所有p标签内部的所有类名为spanItem的标签 */
p .spanItem{}
2.交集选择器
书写规则
a.special{}
<a href='#' class='special'>超链接</a>
<a href='#'>超链接</a>
<a href='#'>超链接</a>
<a href='#'>超链接</a>
选中a中所有类名为special的标签
3.子选择器
后代选择器突出后代
子选择器突出是'子'
代码对比
span {
color: black;
}
p span {
color: orangered;
}
span {
color: black;
}
p>span {
color: orangered;
}
4、并集选择器
给不同的标签，或者不同的类名的标签添加相同的样式
规则 在标签名后或者类名后用逗号隔开
.box,p,h3,.phone{}
box和phone标签名为p、h3的标签添加相同的属性
2-5 选择器的优先级
单个选择器的优先级
id 选择器 > 类选择器 > 标签选择器
p {
color: blue;
}
.poem {
color: red;
}
#ch-poem {
color: purple;
}
最终颜色为 purple 是因为 id 选择器的优先级较高
文字属性的继承性
<ul class='ul-item'>
蒹葭
<li>蒹葭苍苍，白露为霜。所谓伊人，在水一方。</li>
<li>溯洄从之，道阻且长。溯游从之，宛在水中央。</li>
<li>蒹葭萋萋，白露未晞。所谓伊人，在水之湄。</li>
</ul>
.ul-item {
color: #ff6973;
}
全部变为红色，体现了文字属性的继承性
高级选择器的优先级
权重方法
可通过 id 选择器 > 类选择器 > 标签选择器
也可假设 id 选择器 为100 类选择器为 10 标签选择器为 1；进行比较计算
权重的作用
<ul class='ul-item'>
<li>
<p>文字的颜色到底是什么颜色？</p>
</li>
</ul>
ul li p {
color: blue;
}
p {
color: red;
}
第一个为 3 第二个为 1
有的时候权重不起作用
.ul-item li {
color: blue;
}
p {
color: red;
}
由于第一个没有选中 P
文章为用户上传，仅供非商业浏览。发布者：Lomu，转转请注明出处： https://www.daogebangong.com/articles/detail/css.html
支付宝扫一扫 
评论列表（196条）
测试