css样式基础

最新推荐文章于 2024-07-10 23:34:24 发布

lsrzhangmin

最新推荐文章于 2024-07-10 23:34:24 发布

阅读量79

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/lsrzhangmin/article/details/133885692

版权

css的语法

先找到要添加格式的元素|节点|标签，为节点添加格式

选择器

基础选择器

标签选择器
id选择器
类选择器

li{
            font-weight: bolder;
            color:green;
        }
        img{
            width: 100px;
            height: 100px;
        }
        /* 先编写类和格式，然后将格式指定到标签上 */
        .red{
            color: red;
        }
        /* 也可以在标签中先指定类，然后再样式表中设计该类的格式 */
        .a{
            color: blue;
        }

迭代选择器

后代选择器

m n{
    style
}

子代选择器

m>n{
    style
}

组群选择器

a,b,c,....{
    style
}

伪类选择器

<style>
        /* 后代选择器 */
        ul li{
            background-color: blanchedalmond;
        }
        /* 子代选择器 */
        ul>li{
            color:blue;
        }

        /* .a{font-weight: bolder;}
        #b{font-weight: bolder;} */
        /* 群组选择器 */
        .a,#b{font-weight: bolder;}

        /* 选择子节点中的第一个 */
        ul li:first-of-type{
            border: red 6px solid;
        }
        /* 选择子节点中的最后一个 */
        ul li:last-of-type{
            border: 6px blue solid;
        }

        /* 选择子节点中的第二个*/
        ul li:nth-of-type(2){
            border: solid yellow 6px;
        }
        /* 选择鼠标当前所在的标签 */
        ul li:hover{
            font-size: 24px;
            margin-left: 100px;
        }
    </style>

格式

引入css样式的三种方式

内联在头部添加style标签

<head>
    <style>
        选择器{
            样式
        }
    </style>
</head>

行内在标签添加style属性

<span style="color:red;background-color:green;"></span>

外部引入一个.css的外部文件

创建css文件
在css中添加样式，css文件中不需要添加style标签
html文件中头部引入外部样式表

<link rel="stylesheet" href="style.css" />

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

样式继承

继承了文字的央视
后代继承

优先级

id>class>tagname
行内>内联>外部
就近原则

颜色

red yellow
16进制 #000000
#fffff
#ff0000红
#ff00ff紫
#ffff00

#f00
#ff0000
#0f0 =#00ff00

盒子模型

对象样式
- 大小（盒子模型）
- 位置
- 其他属性
哪些因素会会影响到元素节点的大小

外边距 margin

margin:上 右 下 左;

margin: 上下  左右;

margin-left:10px;

边框 border

颜色

border-color:red green yellow blue;

border-left-color:red;

宽度

 border-width:10px 20px 30px 40px;

 border-width:10px,30px;

 border-right-width:10px;

样式

border-style:solid double;

圆角

 border-radius:140px;

内边距

padding:10px 20px 30px 40px;

padding

元素宽度和高度 width,height

div

div默认的宽度是100%，浏览器有多宽，div就有多宽
默认div的高度为0，如果div中存在元素，div的高度就是元素的高度

元素自带的属性，覆盖

    ul{
        margin:16px 0px;
        padding:0px 40px;
    }

    ul{
        margin:0;
        padding:0;
    }

元素分类

块级元素

独占一样
可以设置宽度高度

行内元素

和其他元素共享一样
不可以设置高度宽度

行内块元素

img标签
能够和其他元素共享行
设置width height

<div style="width: 100px;height: 100px;overflow: auto;">我是一个块级元素，我独占一行，我能自己设置高度</div>
    <div style="width: 100px;height: 100px;overflow: auto;">我是另外一个块级元素，我也是独占一样的，我不和上面那个块元素共享一行</div>

    <span style="width: 100px;height: 100px;">我是行内元素，我可以和其他行内元素共享一行</span>
    <span>我也是行内元素，我和前面那个span共享一行</span>

    <img src="img/1.png" style="width: 100px;height: 100px;" alt="">

盒子模型中的其他样式

display

<div style="display:none|flex|inline|block|inline-block|.....;">abc</div>

overflew

    <div sytle="overflow=auto|hide|scroll"></div>

课后练习

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第一题</title>
		<style>
			.yuan{
				width: 100px;
				height: 100px;
				text-align:center;
				line-height: 100px;
				display: inline-block;
				border: 1px black solid;
				border-radius: 50px;
				font-size: 48px;
			}
		</style>
	</head>
	<body>
		<div style="background-color: #ff0000;" class="yuan">东</div>
		<div style="background-color: #ffff00;" class="yuan">软</div>
		<div style="background-color: #ffffff;" class="yuan">集</div>
		<div style="background-color: #00ffff;" class="yuan">团</div>
		<div style="background-color: #00ff;" class="yuan">欢</div>
		<div style="background-color: #00ff00;" class="yuan">迎</div>
		<div style="background-color: #aaaaaa;" class="yuan">新</div>
		<div style="background-color: #ff8800;" class="yuan">同</div>
		<div style="background-color: #88ff00;" class="yuan">学</div>
	</body>
</html>

课后练习

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习题2</title>
		<style>
			.a{
				background-color: rgb(46,204,55);
				width: 300px;
				padding:12px 6px;
			}
			ul{
				width: 80%;
				color:blue;
				font-size: 9px;
				background-color:white;
				margin:12px auto;
			}
			li{
				margin: 12px 6px;
				list-style-type: none;
				border-bottom: blue dotted 1px;
				height: 30px;
				line-height: 30px;
			}
			div>div{
				color: white;
				width: 93%;
				margin: 0px auto;
				border-left: 2px yellow solid;
				text-indent: 0.5em;
			}
		</style>
	</head>
	<body>
		<div class="a">
			<div>
				爱宠知识
			</div>
			<ul>
				<li>养狗比养猫对健康更有利</li>
				<li>日本正宗柴犬亮相，你怎么看柴犬</li>
				<li>狗狗歌曲<新年汪汪></li>
				<li>带宠兜风，开车带宠需要注意什么</li>
				<li>【报销】这狗狗太不给力了</li>
				<li>【报销】这狗狗太不给力了</li>
				<li>【报销】这狗狗太不给力了</li>
				<li>【报销】这狗狗太不给力了</li>
				<li
				style="border-bottom: none;"
				>【报销】这狗狗太不给力了</li>
			</ul>
		</div>
	</body>
</html>
</div>
			<ul>
				<li>养狗比养猫对健康更有利</li>
				<li>日本正宗柴犬亮相，你怎么看柴犬</li>
				<li>狗狗歌曲<新年汪汪></li>
				<li>带宠兜风，开车带宠需要注意什么</li>
				<li>【报销】这狗狗太不给力了</li>
				<li>【报销】这狗狗太不给力了</li>
				<li>【报销】这狗狗太不给力了</li>
				<li>【报销】这狗狗太不给力了</li>
				<li
				style="border-bottom: none;"
				>【报销】这狗狗太不给力了</li>
			</ul>
		</div>
	</body>
</html>