CSS选择器、文字控制属性、复合/伪类选择器

Aya_Liu

已于 2024-02-23 22:04:21 修改

阅读量794

点赞数 18

文章标签： css 前端

于 2024-02-23 21:37:02 首次发布

本文链接：https://blog.csdn.net/Aya_Liu/article/details/136264033

版权

一、选择器

1. 标签选择器：无差异（同名标签设置相同样式）

<title>CSS</title>
<style>
    p{
        color：red;
    }
</style>
<p></p>

1. 类选择器：差异化（不同名标签设置相同样式）

<title> </title>
<style>
    .red{
        color: aliceblue;
    }
</style>
<div class="red"></div>
<!-- 类选择器用 . 使用，写多个标签需用空格隔开 -->

1. id选择器（与Java Script使用）

<title> </title>
<style>
    #red{
        color: aliceblue;
    }
</style>
<div id="red"></div>
<!-- id选择器用 # 使用，同一id在一个页面只能用一次 -->

1. 通配符选择器（消除间距）

*{
    clolr:red
}
<!-- 查找页面所有标签，设置相同样式 -->

二、文字控制属性

<title> </title>
<style>
    p{
        
    }
</style>
<!-- 文字控制属性均写在p{}里面 ,多个属性用；隔开-->

（1）画盒子

width	宽
height	高
background-color	背景色

（2）字大小

字大小 font-size:

单位px (Google默认16px)

（3）字粗细

字粗细 font-weight:

数字	关键字
正常 400	normal
加粗 700	bold

(4)倾斜

倾斜 font-style:

正常	normal
倾斜	italic

(5)行高（上间距+文本高度+下间距）

行高 line-height:

数字+px	数字（当前font-size属性值的倍数）
如： line-height: 30px ;	如：line-height: 2 ; (当前字体大小16px)

（6）字体族

字体族 font-family:

如 font-family: 楷体 ;

（7）font 复合属性（简写）

div{
    font:italic 700 30px/2 楷体；
}
<!-- 字号与字体值必须书写，否则无效 -->

（8）文字缩进

文字缩进 text-indent:

数字+em（1em=当前字体大小）

（9）对齐

文本对齐text-align:

left	左对齐
center	居中对齐
right	右对齐

图片对齐

<title> </title>
<style>
    div{
        text-align: center;
    }
</style>

<div>
    <img src="#" alt="">
</div>

(10)文本修饰线

文本修饰线 text-decoration:

none	无
underline	下划线
line-through	删除线
overline	上划线

(11)颜色文字

颜色文字 colos：

颜色单词	red、green...
rgb（r，g，b）	红绿蓝，取值0-255
ragb（r，a，g，b）	a透明度，取值0-1
十六进制#RRGGBB	#000000、#ffcc00（#000、#fc0）

三、复合选择器

后代选择器

 <title>标题</title>
<style>
	div span{
			color: black;
        }
</style>
<body>
    <span>span标签</span>
    <div>
        <span>这是div后代span</span>
    </div>
</body>

四、伪类选择器

（1）鼠标悬停状态：

鼠标悬停选择器：hover

<style>
     a:hover{
            color: brown;
        }
</style>
<body>
    <a href="#">悬停内容</a>
</body>

(2)伪类-超链接

L V H A顺序

：link	访问前
：vistied	访问后
：hover	鼠标悬停
：active	点击时（激活）

（3）层叠性

相同属性覆盖。后面的CSS覆盖前面；

不同属性叠加，都生效CSS