添加声明
<input type="text" placeholder="手机号码" style="">
CSS中,样式是由属性 和 值 组成
格式为 属性:值;
字体大小
格式 font-size:36px;
字体加粗
格式 font-weight:100;
400–>normal(正常粗细) 200–>lighter(细) 700–>bold
颜色
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);
注意
文字居中/居左/居右
设置文字对齐格式
行高
行高的设置格式: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';
电脑加载时会从第一个字体开始找,第一个没有依次往后找
字体写法注意事项:
行内样式
为了减少标签数量,做到简洁化,引入内部样式
内部样式
<style>
p{
font-size: 16px;
color: #FFFFFF;
}
</style>
外部样式
当添加样式标签较多时,会出现头重脚轻
引入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 属性后跟的要引入的链接地址
绝对路径
如一张图片位置(明确位置)
<img src="E:\book\网页布局\bg.jpg" />
相对路径
定义:所谓相对路径就是相对于文件自身位置,去寻找要引入的资源文件
text文件下有index.html 和 index.css
当前在index.html引入index.css就要用 ./当前文件夹目录
../:回到上一级文件夹目录
../返回上一层,如果有多层就用多个../
css/表示进入css文件
标签选择器
即定义一次,多次使用
分为原始样式 内部样式 外部样式
选择器的层叠性
在一次标签后,继续添加标签会覆盖前一个标签
类选择器
给一段文字赋予特定的属性
定义
<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只能有一个标签
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的标签添加相同的属性
单个选择器的优先级
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