CSS样式

sleP4o

已于 2024-08-26 23:12:12 修改

阅读量805

点赞数 24

文章标签： css 前端

于 2024-08-21 00:08:33 首次发布

本文链接：https://blog.csdn.net/2302_80445243/article/details/141331465

版权

1.CSS应用方式

在标签上

<img src="..." style="height: 50px">

在head标签中写style标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            color: red;
        }
    </style>
</head>

<body>
<h1 class="c1">Welcome!!!</h1>  # 运用class="c1"
</body>

写到文件中

.c1{
	height:100px;
}

.c2{
	color:red;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="common.css" />  # 导入该文件
</head>

<body>
<h1 class="c2">Welcome!!!</h1>
</body>

2.选择器

ID选择器

#c1{
	color: red;
}

<div id='c1'></div>

类选择器(*)

.c1{
	color: red;
}

<div class='c1'></div>

标签选择器(*)

div{
	color: red;
}

<div></div>

属性选择器

input[type="text"]{
	border: 1px solid red;
}
.v1[xx="456"]{
	color: gold;
}

<input type="text">
<input type="password">

<div class="v1" xx="123">text</div>
<div class="v1" xx="456">text</div>

后代选择器(*)

指yy下所有的li标签
.yy li{
		color: pink;
}

只找div表面的li标签，不找div的div中的
.yy > li{
	color:blue;
}

<div class="yy">
    <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ul>
    <div>
    	<ul>
	        <li>a</li>
	        <li>b</li>
	        <li>c</li>
    	</ul>
    </div>
</div>

补充:
使标签不被覆盖
.c1{
	color: red !important;
}

3.样式

3.1 高度和宽度

.c1{
	height: 300px;
	width: 500px;
}

注意事项：

宽度支持百分比
行内标签(span)：默认无效
块级标签(div)：默认有效

3.2 块级标签和行内标签

块级标签
行内标签
css样式：标签 -> display: inline-block

行内&块级的特性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            display: inline-block; 
            height: 100px;
            width: 300px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <span class="c1">中国</span>
    <span class="c1">联通</span>
</body>
</html>

行内&块级的转换

<div style="display: inline">中国</div>

<span style="display: block">联通</span>

3.3 字体和颜色

<style>
 .c1{
	color: #2F4F4F;
	font-size: 58px;
	font-weight: 520;
	font-family: Microsoft YaHei UI;
}
</style>

3.4 文字对齐方式

.c1{
    height: 59px;
    width: 300px;
    border: 1px solid red;
    
    text-align: center;  /*水平方向居中*/
	line-height: 59;  /*垂直方向居中*/
}

3.5 浮动

<div>
	<span>zuo</span>
    <span style="float: right">you</span>
</div>

由于float的运用会导致上面的样式被覆盖，因此如果运用float，底下记得clear

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .item{
            float: left;
            width: 280px;
            height: 170px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div style="background-color: blue">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div style="clear: both" ></div>
    </div>
</body>
</html>

3.6 内边距

自己本身内部设置的距离

.outer{
	border: 1px solid red;
	height: 400px;
	width: 200px;
	/*内边距*/
	padding: 20px 10px 5px 20px;  /*上右下左*/
	/*padding: 20px;*/
	/*padding-top: 20px;*/
	/*padding-left: 20px;*/
	/*padding-right: 20px;*/
	/*padding-bottom: 20px;*/
}

3.7 外边距

与别人的距离

<div style="height: 200px; background-color: navy"></div>

<div style="height: 100px; background-color: red; margin-top: 10px"></div>
/*距离上面的元素10px*/

3.8 小结

3.8.1 去除默认页边距

body标签，默认有一个边距，造成页面四边都有白色间隙，如何去除呢？

body{
	margin: 0;
}

3.8.2 内容居中

文本居中，文本会在这个区域中居中
<div style="width: 200px; text-align: center;">xiechimon</div>
区域居中，自己要有宽度+margin-left: auto; margin-left: auto
.container{
	width: 980px;
	margin: 0 auto;
}

3.8.3 warning float !

如果存在浮动float，一定记得加入

<div style="clear: both"></div>

3.8.4 copy别人样式

3.8.5 行内标签转换

a标签是行内标签，行内标签的高度、内外边距，默认无效

a{
	display: inline-block;
}

3.8.6 垂直方向居中

文本居中

.sub-header .menu-list{
	line-height: 100px;
}

图片居中
计算图片与上下边距，使其位于中间

.sub-header .logo a{
	margin-top: 22px;
}

3.8.7 下划线去除

a标签默认有下划线

.sub-header a{
	text-decoration: none;  /*去除下划线*/
}

3.8.8 鼠标放上去之后的样式

hover

.c1:hover{
	color: #ff6701;
}

3.8.9 设置透明度

.c1{
	opacity: 0.5;  /*不透明度0~1*/
}