cssの基础

周思涵 发布于 2024-07-24 195 次阅读


前言:

css算不上一门编程语言,专业一点可以称他为层叠样式表,不专业的可以说他是给html标签加上美化属性。

 

常见的css属性:

栗子:

注意: 每一个属性间需要用英文分号进行间隔 (;)

选择器是啥?  比如我要给我的a标签加一个美化

a{

color: black;

backgroud-color: white

}

上面说呈现的是给a标签内的字体改为白色,字体背景改成黑色。

 

这时候就有人要说了: 给a标签加属性后,不是所有的a标签不都是这个样式了,这时候就可以考虑是否用标签内置。

还是拿a标签举栗子

<a style:"color: white;black-ground: white"></a>

 

这样就不会影响到别的a标签了

上面的a标签也代表别的标签~

 

 

选择器:

啥是选择器?

栗子:

.font {

text-size: 10px;

color: white;

}

上面的代码中.font就是选择器

 

怎么引用这段属性?

这里拿div标签举例:

<div class:"font">demo</div>

 

 

理论结束

常见的css属性:

margin-top: 10px //离上面的外边距离

margin-bottom: 10px //离上面的外边距离

margin-left: 10px //离上面的外边距离

margin-right: 10px //离上面的外边距离

 

 

 

color: (可以填支持的颜色英文/16进制代码)

color: rgba(242,179,179,0.15); //用rgb颜色代码,这里的rgba为设置颜色透明度15代表透明度为15.(也可以直接使用rgb)

background-color: (可以填支持的颜色英文/16进制代码)

background-color: rgba(242,179,179,0.15);

 

 

 

text-align: center: //字体在样式中处于中间位置,可能会与某些属性参数排斥反应,适用于大多数场景。

text-size: 10px //字体大小(只是大小,并不是粗细)

font-weight: 100 //字体粗细(只是粗细,并不是大小)

 

 

 

border-size: 1px //外边框粗细(将属性定义为none则表示去除边框)

border-radius: 25px //设置元素的外边框圆角(50px为圆形)

栗子:(给原生button按钮加属性)

.button123 {

border: none;

border-radius: 20px;

}

 

<button class:"button123">123</div>