CSS学习笔记（文字属性~后代选择器）

最新推荐文章于 2023-04-06 14:35:13 发布

甜甜今天学了吗

最新推荐文章于 2023-04-06 14:35:13 发布

阅读量321

点赞数

文章标签： css

本文链接：https://blog.csdn.net/dawanhjiao/article/details/102885315

版权

CSS格式

<style type="text/css">
选择器{
	属性；
}
</style>

style要写在head标签里；style里的type属性可以不写，因为它默认的就是type=“text/css”;属性后的分号不要忘记。
CSS注释：/* */

文字相关属性

1.文字样式：font-style:normal/italic/oblique;
italic和oblique都是斜体，不同的是oblique比italic的字更偏右一些。
2.文字粗细：font-weight:normal/bold/bolder/lighter/数字（用的比较少）;
3.文字大小：font-size:50px;
px:像素。
4.字体系列：font-family:'宋体'/serif;
如果字体系列的名称超过一个字，它必须用引号，双引号或单引号
设置的字体必须是用户电脑里面已经安装的字体
四个属性一起设置：font:style weight size family;

p{
     font:italic bolder 50px "宋体";
}

注意：
1.style、weight可以省略，size、family不可以省略
2.style和weight可以交换，其他不可以。

1. 如果设置的字体不存在，而我们又不想让用户用电脑默认的字体：

font-family:"哈哈哈哈字体","隶书","宋体"；

前面的字体找不到，就继续用后面的字体。
2. 如果想给很多文字里的英文设置另一种字体：

font-family:"Times New Roman","宋体";

因为英文字体不可以处理中文，但中文字体可以处理英文，所以可以先设置英文字体在设置中文字体。
并不是字体名字是英文，它就是英文字体，因为每个中文字体都有它的英文名。
**3.**企业中常用的字体：
中文：宋体、黑体、微软雅黑
英文：“Times New Roman”、Arial

文本属性

1.文本装饰：text-decoration:underline/line-through/overline/none;
underline:下划线；
line-through：删除线；
overline：上划线；
none:什么都没有，多用于去掉超链接的下划线。
2.文本对齐：text-align:center/right/left
3.文字缩进：text-indent:2em;
2em，其中em是单位，一个em代表缩进一个文字的宽度。

颜色属性

p{
	color: red;
}

取值：
1.color：red;英文单词赋值
2.color:rgb();
每个像素都有红、绿、蓝三原色，r（red）g（green）b（blue）就是三原色
rgb（0，0，0）
里面的数字分别设置红色，绿色，蓝色显示的亮度。每个数字的取值范围都是0-255，0代表不发光。
红色:rgb（255,0,0）;
黑色:rgb（0,0,0);
白色:(255,255,255);
灰色:让这三个值一样，越小越接近黑色，越大越接近白色。
3.color：rgba（）
a代表透明度，取值是0-1，值越小越透明
4.十六进制
eg:#FFEE00
FF表示r,EE表示g,00表示b，每两位表示一个颜色
FF相当于255
5.十六进制缩写
eg:#FE0
在十六进制中每个颜色的两位的值是相同的，就可以把它转换成十六进制的缩写。

标签选择器

作用:根据指定的标签名称，在当前界面中找到所有名称的标签，然后设置属性。
只要是HTML中的标签，都可以作为标签选择器

id选择器

注意:id不能重复命名
id名称只能由字母，数字，下划线组成，并且不能以数字开头。
一般CSS不用id，id一般用到JS里。

#id名称{
       属性:值;
}

类选择器 class

.class名称{
       属性:值;
}

注意:class名称是可以重复的。
class名称只能由字母，数字，下划线组成，并且不能以数字开头。
CSS一般用class
在HTML中每个标签可以同时绑定多个类名。

后代选择器

先找到名称1的标签，再找到名称1下所有名称2的标签。

名称1 名称2{
	属性：值；
}

div p{
     color:red;
}
/*或者*/
.hhhh p{
	color:red;
}
/*或者*/
.hhhh .hahaha{
	color:blue;
}
/*或者*/
div ul li p{
	color:yellow;
}

<div class="hhhh">
	<p>   </p>
	<ul>
		<li>
			<p class="hahaha">   </p>
		</li>
	</ul>
</div>
<p>   </p>

会找到div里两个p标签，不会找到没有在div标签里的p标签
注意
1.标签1，标签2之间一定要隔一个空格。
2.后代是指所有的后代。
3.后代选择器不仅仅可以用标签选择器，还可以用其他选择器。
4.后代选择器不只有两个标签，可以有多个标签，一直找后代的后代的······