HTML+CSS复习（二）

Whnist

已于 2022-12-29 20:24:25 修改

阅读量66

点赞数

文章标签： css html 前端

于 2022-12-29 17:36:12 首次发布

本文链接：https://blog.csdn.net/Meg_Fu/article/details/128468124

版权

这里写目录标题

二十二、选择器
二十三、文本属性
二十四、列表属性
二十五、背景属性
二十六、背景的复合属性
二十七、浮动属性
二十八、盒子模型

二十二、选择器

1、标签选择器

在这里插入图片描述

    <title>Document</title>
    <style>
        div{ width: 50% ; height: 100px ; background-color : red; }   
        h1{color : blue; }
    </style>
</head>
<body>
    <div>111</div>
    <div>222</div>
    <h1>111</h1>
    <p>111</p>
</body>
</html>

2、类选择器

    <title>Document</title>
    <style>
        .ibm{background-color : red;}
        .qianfeng{color:red;}
    </style>
</head>
<body>
    <div>111</div>
    <div class="ibm">222</div>
    <div class="ibm qianfeng">333</div>
    <div>444</div>
</body>
</html>

3、id选择器

在这里插入图片描述

    <title>Document</title>
    <style>
        #box1{background-color : red;}
        #box2{background-color : blue;}
        #box3{background-color : yellow;}
    </style>
</head>
<body>
   	<div id="box1">111</div>
    <div id="box2">222</div>
    <div id="box3">333</div>
</body>
</html>

4、通配选择器

在这里插入图片描述
外边距：margin:0;
内边距：padding:0;

*{margin:0;padding:0;}

5、群组选择器

在这里插入图片描述

 <style>
 div , p , h1{ background: yellow;}
 </style>

6、后代选择器

在这里插入图片描述

    <title>Document</title>
    <style>
    div p{ background: yellow;}
    </style>
</head>
<body>
	<div>
		<p>111</p>
	</div>
</body>
</html>

7、伪类选择器

在这里插入图片描述
link和visited只能用于a，其他的可以用于其余的。

    <title>Document</title>
    <style>
    	a:link{color: yellow;}
    	a:visited{color: red;}
    	a:hover{color: orange;}
    	a:action{color: green;}
    </style>
</head>
<body>
	<a href="http://www.baidu.com">百度</a>
</body>
</html>

8、选择器的权重

！important>内联样式>包含选择器>id选择器>class选择器>类型（元素）选择器

二十三、文本属性

在这里插入图片描述

词间距：word-spacing
首行缩进
em单位：相对单位，1em永远跟字体大小相同（字缩进字符与字大小不同行与行之间无法对齐，所以需要em单位）

字体：
在这里插入图片描述
text-transform: capitalize（首字母大写）
text-transform: lowercase（字母小写）
text-transform: uppercase（字母大写）
text-transform: none（无设置）

二十四、列表属性

在这里插入图片描述

二十五、背景属性

在这里插入图片描述
背景图片大小
background- size

cover:把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。也许无法显示在背景定位区域中。

contain:把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。铺不满盒子,留白

视觉差

    <title>Document</title>
    <style>
    #div1{ width:1400px;height: 800px; background-image:url(图片地址1); background-attachment: fixed;}
    #div2{ width:1400px; height: 800px; background-image:url(图片地址2); background-attachment: fixed;}
    #div3{ width:1408px; height: 800px; background-image:url(图片地址3); background-attachment: fixed;}
    </style>
</head>
<body>
    <div id="div1">
        内容1
    </div>
    <div id="div2">
        内容2
    </div>
    <div id="div3">
        内容3
    </div>
</body>
</html>

二十六、背景的复合属性

复合写法:

用空格隔开
顺序可以换
可以只取一个值,放在后面能覆盖前面的值
background-size只能单独用

注释处与下方代码效果一致

<style>
        div{
	        width : 600px;
	        height : 600px;
	        /* background-color: yellow;
	        background-image: 					
	        url(img/1.jPg);background-repeat: no-repeat;
	        background-position: center;
	        background-attachment: fixed; */

	        background : yellow url(img/1.jpg) no-repeat center fixed;}
</style>