CSS基础学习（1）

认识学习C

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);

注意

1. 建议使用十六进制表达方式
2. 调试时可以用英文字母形式，初期的调试就是随便设置一个颜色，查看区块是否存在等，在合模型中我们会遇到
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的三种引入方式

行内样式

为了减少标签数量，做到简洁化，引入内部样式

内部样式

1. 将CSS样式抽出来
2. 在head标签里声明一个< style>< /style> 标签
3. 将样式放到 style 标签里面
4. 相同的标签，写在相同的大括号里面 {},大括号前加上标签名

<style>
p{
    font-size: 16px;
    color: #FFFFFF;
}
</style>

外部样式

当添加样式标签较多时，会出现头重脚轻

引入css存放样式代码

1. 建一个index.css文件
2. 写入< style>
3. 建立HTML和CSS文件的联系，即是 link标签引入CSS文件

<link rel="stylesheet" type="text/css" href="index.css" />

补充知识

CSS内部注释为

/*   */

外部注释 直接在.css文件中注释

link

1. rel属性 rel属性规定了当前文档与被链接文档之间的关系，但是rel属性的stylesheet值被所有浏览器支持，也就是说你只要记住一个值即可。

stylesheet的意思就是文档的外部样式表。

2.type属性 type属性规定了被链接文档的 MIME（多用途互联网邮件扩展类型）类型，type属性对应的最常见的值就是text/css，该类型描述样式表.

3.href属性 href 属性后跟的要引入的链接地址

2-2 相对路径/绝对路径

绝对路径

如一张图片位置(明确位置)

<img src="E:\book\网页布局\bg.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