CSS 常⽤

常⽤CSS

⼀些常⻅的css样式  准备如下html

<div class="text1">我是⽂本1</div>

color

color:设置字体颜⾊

.text1{
color: red;
}

颜⾊有如下⼏种表达⽅式:

• 英⽂单词,如red,blue

• rgb代码的颜⾊如rgb(255,0,0)

• ⼗六进制的颜⾊如#ff00ff

font-size

font-size:设置字体⼤⼩

.text1{
font-size: 32px;
}

border

border:边框

边框是⼀个复合属性,可以同时设置多个样式,不分前后顺序,浏览器会根据设置的值⾃动判断

.text1{
border: 1px solid purple;
}

以上border属性的对应设置的维度分别为边框粗细,边框样式,边框颜⾊.

border: 1px solid purple; 就等同于以下代码:

.text1 {
/* border: 1px purple solid; */
border-width: 1px;
border-style: solid;
border-color: purple;
}

width/height

width:设置宽度

height:设置⾼度

只有块级元素可以设置宽⾼

块级元素是HTML标签的⼀种显⽰模式,对应的还有⾏内元素

常⻅块级元素:h1-h6,p,div等

常⻅⾏内元素:aspan

块级元素独占⼀⾏,可以设置宽⾼

⾏内元素不独占⼀⾏,不能设置宽⾼

改变显⽰模式

使⽤display属性可以修改元素的显⽰模式.

• display: block 改成块级元素[常⽤]

• display: inline 改成⾏内元素[很少⽤]

.text1 {
width: 200px;

height: 100px;
}

padding

padding:内边距,设置内容和边框之间的距离.

内容默认是顶着边框来放置的.⽤padding来控制这个距离

.text1 {
padding: 20px;
}

padding也是⼀个复合样式,可以对四个⽅向分开设置

• padding-top

• padding-bottom

• padding-left

• padding-right

 外边距

margin:外边距,设置元素和元素之间的距离.

text1 {
margin: 20px;
}

margin也是⼀个复合样式,可以给四个⽅向都加上外边距

• margin-top

• margin-bottom

• margin-left

• margin-right