CSS基础

HannyGn

已于 2024-03-03 13:53:19 修改

阅读量395

点赞数 4

分类专栏：前端文章标签： python css

于 2024-03-01 12:32:01 首次发布

本文链接：https://blog.csdn.net/GodnFrnXX/article/details/136392513

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS的选择器类型（如类选择器、ID选择器、属性选择器等）、如何在HTML中应用CSS，以及布局控制、浮动、内边距、外边距、文本对齐和鼠标悬停效果的使用方法。

摘要由CSDN通过智能技术生成

CSS是用来美化各个标签
CSS的应用方式
1.标签中
例如
<img src=".../..." style="height:???px">
<img src=".../..." style="height:???%">
<div style="color:red;">?<div>
2.在head标签中写入CSS标签
首先在<head>中直接写<style>
例如
<head>
<meta charset=UET-8">
<title>Title</title>
<style>
.c1{
   color:red;
   }
</style>
</head>
如果需要在任意标签中应用color，则
例如在h1标题中应用.c1的color
<h1 class='c1'>标题</h1>
3.写入到文件中
首先在文件中写入
.c1{
     height:100px;
}
.c2{
     color:red;
}
然后在head中<link rel="stylesheet" href="common.css">
然后在需要更改的标签中写入class
CSS和JS这种静态数据包一般放在项目目录中的static中，并创建一个stylesheet（中文的话是样式表），如果是社区版，新建文件然后自命名.css

类选择器和ID选择器
例如
<head>
<meta charset=UET-8">
<title>Title</title>
<style>
    .c1{
    color:red;
   }
    #c2{
   color:gold;
}
</style>
</head>
c1是类选择器，c2是ID选择器。类选择器可以重复，ID不可以，且ID选择器优先级要高于类选择器
使用方式：
类选择器： class="c1"
ID选择器:    ID="c2"

标签选择器
如果有<li></li>
可以在<head>中直接将<li>全部更新为自己的css，例如
<head>
<meta charset=UET-8">
<title>Title</title>
<style>
    .c1{
    color:red;
   }
    #c2{
   color:gold;
}
li{
color:yellow;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
重载后li中的所有数据就是黄色的。
同理对于像div span这种标签，在head中都可以直接选择并且更改CSS样式。
更改的是全体相同标签，如果在head中写入了div的css样式，那么在body中的所有div都是与head中的css相同

ID标签只能应用于一个，而class标签可以同时应用于多个标签

属性选择器
例如web中有很多input，其中有radio，text，password，我只需要更改input的text标签
则在head中
input[type="text"]{
border:1px solid gold;
}
即我们只更改input中的text，加一个1px的金色的边框

这个属性选择器选择的并不需要必须是规范语言，例如web中有
<input class="a1" run="111" type="text">
<input class="a1" run="222" type="password">
<input class="a1" run="333" type="radio">
如果我需要找到run=222
可以在head中直接
input[run=222]{
color:red;
}
就可以直接只更改run=222的input标签

后代选择器
<head>
<meta charset=UET-8">
<title>Title</title>
<style>
    .c1{
    color:red;
   }
    #c2{
   color:gold;
}
li{
color:yellow;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<div>
<li>1</li>
<li>2</li>
</div>
如果我只想更改div中的li而不更改ul的
则在head中的li更改为
.aa li{
    color:red;
}
然后在div中写入
<div class="aa">
......
<div>
他的查找顺序，先在web中寻找css的class=aa的，然后再拥有class=aa的标签中寻找li标签，然后把CSS样式更改为head中规定的样式，对于其他没有写入class="aa"的li标签并不会更改样式

如果在儿子辈和孙子辈中都有li标签，但只想在儿子辈中寻找标签并更改样式，则我们可以在head中的.aa li进行更改
改正为
.aa>li{
color:red;
}

多覆盖选择
如果一个标签应用了多个css
例如在head中
.c1{
color:red;
}
.c2{
color:blue;
}
然后在body中
<div class="c1 c2">
则只会应用下层的CSS标签，所以最后显示的是C2标签（注意，并不是class中的先后顺序，而是在head中写的先后顺序，优先取下层的CSS标签）

如果不想让下层的CSS标签覆盖上层的CSS标签，可以在上层的CSS标签中添加
!important
例如在head中
.c1{
color:red;
}
.c2{
color:blue;
}
理论上如果一个标签class="c1 c2"，C2一定会覆盖C1的color，但是如果将head中的C1增加!important
即：
.c1{
color:red !important;
}
.c2{
color:blue;
}
则假设在class中同时选择了c1和c2，c1也不会被c2覆盖，因此最后选择的是C1标签

样式
1.高度宽度
height width
宽度支持百分比
对于行内标签，宽度高度默认无效(例如span标签)
对于块级标签，宽度高度默认生效(例如div标签)

如果需要行内标签生效，则在head的CSS标签中加入
.c1{
display:inline-block;
~~~~(css样式)
}
此时再在类似于span的行内标签应用C1就可以更改高度宽度了
display:inline-block相当于强制把行内标签转化为既具有块级又具有行列性质的标签。

对于想要指定转化为行内标签或者是块级标签，则
display:inline 转为行内标签
display:block 转为块级标签

字体颜色和大小
color:red/blue/gold/...       字体颜色
font-size:???px/large/larger/...   字体大小
font-weight:???px/bold/bolder/...   字体加粗
font-family:????(microsft yahei)   字体格式（有些不可以商用）

文字对齐方式
text-align: center(水平方向居中)
line-height：（设置的height高度）px （垂直方向居中）

浮动
例如两个span标签
<span>left</span>
<span>right</span>
一般来说web中会在最左边显示"left"和"right"
但是可以通过浮动将"right"显示到最右边
<span style="float:right">右边</span>

div等类似的块级标签一般都是占据一整个行（即便内容不足以占据一整行），但是如果我们加入style="float:left/right"则不会占据一整行，和行内标签类似了。
float之后标签会脱离文档流。例如
<div>
<div style="float:left;border:1px solid red">123</div>
</div>
如果在父辈的div中添加style="background-color:red"(背景色)
即
<div style="background-color:red">
<div style="float:left;border:1px solid red">123</div>
</div>
在web网页中无法显示红色背景色，因为父级div需要子级div的大小来确定自己的大小，但是子级div没有原先的div性质了（因为现在是float），所以父级div无法确定自己的div规格大小。
如果想要将子级div拥有float的属性的同时，能给父级div一个传递大小数据的能力，则需要在子级中添加
<div style="clear:both;"></div>

内边距
<div style="border:1px solid gold;">123</div>
如果需要123不紧挨着边框，则可以增加padding ??
例如     padding top     ：??px     内文字距离上边框的距离为??px
   padding left      : ??px   内文字距离左边框的距离为??px
   padding right    : ??px   内文字距离右边框的距离为??px
   padding bottom: ??px   内文字距离下边框的距离为??px

使用padding的时候需要注意，如果规定了div中style中的框的高度宽度了，假设为50px，然后padding top的px为10px，则实际上这个div占据的高度为60px（padding是向外拓展的）
如果需要全部（上下左右）都需要内边距，则只需要写padding：？？px
也可以上下左右这样写：
padding：10px /*上边*/ 5px /*右*/ 15px /*下*/ 20px /*左*/

外边距
在style里写入 margin-??
margin-top:??px           上
margin-bottom:??px    下
margin-left:??px       左
margin-right:??px       右
外边框不影响自己的size(不会像内边框会被迫扩大)

body标签默认都是有外边框的，如果我们想让边框占满，需要在head中写入
body{
magrin="0";
}

如果需要内容相对web居中，可以在style中写入
margin="0 auto";
0代表着上下外边距离为0，auto为左右相对的外边距，因此保证了内容居中，但是一定需要设置width宽度

注意
1.body一般都有自己的外边距,会有白色空隙,如果需要取消白色空隙,则可以在Head标签中加入
body{
margin:0px;
}

2.文本居中和标签区域居中
文本居中:
假设在div中有文本123(首先div中要有width宽度),可以设置style或者head中写入text-align:center
标签区域居中:
首先要保证区域要有width宽度,其次在Head或者Style中写入margin:Auto
就可以让区域居中

3.如果标签被Float了,并且父标签没有宽度高度,就需要在标签中写入Style="clear:both"让标签float回来,能被父标签继承子标签的高度宽度.

4.a标签标准就是行类标签,没办法定义高度宽度,内标签外标签,如果需要更改就要增加display:inline-block,强制转化为行内+块级标签的性质.

5.a标签默认都会带有下划线,如果需要去除就需要在style中写入text-decoration:none,也可以改为其他的颜色.

6.一般来说并排排列的超链接,都需要增加内间距padding来保证两个超链接之间的空白随便点都可以点到链接.

7.如果需要鼠标移动到超链接标签的时候,字体颜色改变,就需要在head中增加一个hover,例如
a:hover{
color:red(或者其他颜色)
}
当鼠标指针指向超链接的时候,就会显示head中的hover中的颜色.