CSS基础

最新推荐文章于 2024-08-24 13:47:49 发布

◆dear

最新推荐文章于 2024-08-24 13:47:49 发布

阅读量50

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_67794975/article/details/132108645

版权

CSS基础

1.注释

/*注释内容*/

2. 应用方式

内联样式处于标签内部，放在style属性中

<img src="..." style="height:100px" />

<div style="color:red;">中国联通</div>

内部样式在head标签中写style标签

<style type="text/css">
	p{
        align:center;
        color:red;
        font-size:30px;
        font-family:黑体;
	}
</style>

外部样式

处于文件外部，外部文件的引用一般放在head部分的link标签中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="common.css" />
</head>
<body>

<h1 class='c1'>用户登录</h1>
<h1 class='c2'>用户登录</h1>
<h1 class='c2'>用户登录</h1>
<h1 class='c1'>用户登录</h1>
    
</body>
</html>

3. 选择器

类选择器
```
.c1{
    
}
<div clss='c1'></div>
```
ID选择器
```
#c1{
 	xxx   
}
<div id='c1'></div>
```
标签选择器
```
div{
    
}
<div>xxx</div>
```

属性选择器

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

选择器组
```
    div,.a,#b{
        font-family:"黑体";
        font-size:16px;
    }
```
选择器声明为以逗号隔开的选择器列表，将一些相同规则作用于多个元素

派生选择器

后代元素选择器：选择某元素所有后代（子孙）元素

语法：父选择器后代选择器

#div p{
	font-family:"黑体";
	font-size:16px;
}
/* 以上样式起作用于页面中的id="div "中嵌套的所有p元素 */

子元素选择器：选择某元素的所有子元素

语法：父选择器>子选择器

#div>p{
	font-family:"黑体";
	font-size:16px;
}
/* 以上样式起作用于页面中的id="div "中仅嵌套第一层的所有p元素 */

伪类选择器

以冒号区分对象及其状态，用于设置某元素在不同状态下的样式

/*
 常用伪类:
	link：向未被访问的超链接添加样式
	visited：向已被访问的超链接添加样式
	hover：当鼠标悬停至元素上方时，向该元素添加样式
	active：向被激活的元素添加样式
	focus：当元素获取焦点时，向该元素添加样式
 */

/*未被访问的*/
a:link{
    color:blue;
}

/*鼠标悬停上方的状态*/
a:hover{
    color:green;
}

/*已访问*/
a:visited{color:red;
}

/*选择激活的原则，正被点中的元素*/
#bnt:active{
    background-color:blue;
} 

/*获取焦点*/ 
#txt:focus{
    background-color:red;
}

4. 块级和行内标签

示例：块级和行内标签的设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>
</head>
<body>
    <div style="display: inline;">中国</div>
    <span style="display: block;">联通</span>
</body>
</html>

行内标签:如
|
- 行内标签的高度、内外边距，默认无效。

5. 字体设置

颜色
大小
加粗
字体格式

文字对齐方式

文本居中，文本会在这个区域中居中。

text-align: center; /* 水平方向居中 */
line-height: 59px; /* 垂直方向居中 */

区域居中,自己要有宽度 + margin-left:auto;margin-right:auto
```
.container{
    width: 980px;
    margin: 0 auto;
}
```

6.浮动

让元素脱离流定位，将其放置在父元素的左边或者右边

float：left | right

div默认块级标签（霸道），如果浮动起来，就不一样了。

如果你让标签浮动起来之后，就会脱离文档流。

说明：clear属性可以消除浮动所带来的影响，有4种取值：

none：默认值，即不消除影响
left：元素的左边不允许出现浮动元素
right：元素的右边不允许出现浮动元素
both：元素的两边均不允许出现浮动元素

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

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

7.内边距

自己内部设置的距离。

<style>
    .outer{
        border: 1px solid red;
        height: 200px;
        width: 200px;

        padding-top: 20px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 20px;
    }
</style>

<style>
    .outer{
        border: 1px solid red;
        height: 200px;
        width: 200px;

        padding: 20px;
    }
</style>

<style>
    .outer{
        border: 1px solid red;
        height: 200px;
        width: 200px;

        padding: 20px 10px 5px 20px;
    }
</style>

8. 外边距

我与别人加点距离。

<div style="background-color: red;height: 100px;margin-top: 20px;"></div>

9. 伪类

 <style>
    .c1 {
        color: red;
        font-size: 18px;
    }

    .c1:hover {
        color: green;
        font-size: 50px;
    }
	.c1:after{
        content: "大帅哥";		/*会在其尾部自动加上一些东西*/
    }
</style>