【CSS】属性

CSS的常用属性 

1  颜色属性

<div style="color:blueviolet">Hello World</div>
<div style="color:#ffee33">Hello World</div>
<div style="color:rgb(255,0,0)">Hello World</div>
<div style="color:rgb(255,0,0,0.5)">Hello World</div>

2  字体属性

font-size: 20px/50%/larger
font-family: "Lucida Bright"
font-weight: lighter/bold/border/
<h1 style="font-style: oblique">Hello World</h1>

3  背景属性

background-color: cornflowerblue

background-image: url('1.jpg');

background-repeat: no-repeat;(repeat:平铺满)

background-position: right top（20px 20px）;(横向：left center right)(纵向：top center bottom)

      简写：<body style="background: 20px 20px no-repeat #ff4 url('1.jpg')">

              <div style="width: 300px;height: 300px;background: 20px 20px no-repeat #ff4 url('1.jpg')">

4  文本属性

font-size: 10px;

text-align: center;   横向排列

line-height: 200px;   文本行高 通俗的讲，文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比

vertical-align:－4px  设置元素内容的垂直对齐方式 ,只对行内元素有效，对块级元素无效


text-indent: 150px;   首行缩进
letter-spacing: 10px;
word-spacing: 20px;
text-transform: capitalize;

5   边框属性

border-style: solid;
 
border-color: chartreuse;
 
border-width: 20px;
 
简写：border: 30px rebeccapurple solid;

6   列表属性

ul,ol{   list-style: decimal-leading-zero;
         list-style: none; <br>         list-style: circle;
         list-style: upper-alpha;
         list-style: disc; }

7  dispaly属性

none
block
inline

display:inline-block可做列表布局，其中的类似于图片间的间隙小bug可以通过如下设置解决：

#outer{
            border: 3px dashed;
            word-spacing: -5px;
        }

8  外边距和内边 

9 float属性

10 position(定位)

正常文档流：将元素（标签）在进行排版布局的时候按着 从上到下 从左到右的顺序排版的一个布局流

脱离文档流：将元素从文档流中取出，进行覆盖，其他元素会按文档流中不存在改元素重新布局

https://www.cnblogs.com/yuanchenqi/articles/5977825.html

 

posted @ 2020-08-05 22:24  Shuranima  阅读(62)  评论(0)    收藏  举报