CSS常用属性

2021-07-24 12:33:02 阅读：77 来源： 互联网

标签：常用设置标签边框 background margin border CSS 属性

CSS常用属性

1，颜色属性

三种方式：

1）<div style="color:red">ppp</div>

2）<div style="color:html颜色代码">ppp</div> 如下：

<div style="color:#CE0000">ppp</div>

效果图如下：

3）<div style="color:rgb(255,0,0)">ppp</div>

4）<div style="color:rgba(255,0,0,0.5)">ppp</div> 最后一个参数代表透明度（0-1）

2，字体属性

front-size(字体大小）：可以通过这三种来调：像素（例如：20px)/ 百分比（例如：50%）/ larger

front-amily（代表字体）

front-weight（代表粗细）：有4种：lighter/bold/border/数字（例如100）

front_style(代表设置斜体）

3，背景属性（重点）

background-color:代表背景颜色

background-image(代表背景是图片):url("图片路径")

background-repeat：no repeat(不重铺）不设置会默认铺满。

background-position（代表位置）: x,y (x代表的是左右位置，y代表的上下位置）

例1:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .img{
            border: 1px solid red;  ===》设置边框，红色

            width: 500px; ===〉设置宽度
            height: 500px;===》设置高度
            background-image: url("123.png");==》设置背景图片
            background-repeat: no-repeat; ==》设置背景图片不重铺
            background-position: 0 center;==》设置背景图片的位置
        }
    </style>

</head>
<body>
 <div class="img"></div>

</body>

效果如下：

例2: 抽屉

如果要调试图片的位置，可以先在浏览器上运行一下代码，然后点击检查，然后找到需要调整的内容的位置进行调整，如下是对body中的span标签进行调整就需要先找到span标签然后调整图片位置，可以按上下键进行调整位置，调整好后将最后位置写入代码中

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span{
            display: inline-block;===》display：inline-link可以使内联式拥有块级的功能：可以设置宽，高。
            width: 140px;======》根据背景图片大小进行设置
            height: 140px;======〉根据背景图片大小进行设置

            background-image: url("111.png");
            background-repeat: no-repeat;
            background-position: 0 -166px;
        }
    </style>

</head>
<body>
  <span></span>

</body>

效果图如下：

注意：对background 进行设置可以直接简写，如上边代码简写为：background: no-repeat 0 -166px url("111.png")

4, 文本属性

front-size(字体大小）：例如：10px

text-align(横向排列）: 例如：center (居中）

line-height：文本行高，即：文字高度加上文字上下的空白区域的高度例如：行高等于文本的height 即：竖向局中

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

text-indent（首行缩进）

letter-spacing(字符与字符的间距）

word-spacing（字母与字母之间的间距）

text-transform:capitalize 代表首字母大写

例1:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       div{
           height: 100px;===》设置文本高度，宽度不设置默认100%
           background-color: red;==》背景颜色：红色
           text-align: center;===〉横向居中
           line-height: 100px;===》因为行高度等于文本高度，所以是纵向居中
       }
    </style>

</head>
<body>
    <div>介绍文本属性</div>

</body>

效果图如下：

5，边框属性

border(边框）

border-color 所有边框颜色

border-style 所有边框样式 dashed(虚线样式）soild(实线样式）

border-width 所有边框厚度

以上边框代码可以简写为：border: 厚度值样式值颜色值

border-left 左边边框

border-left-style 左边边框样式

border-left-color左边边框颜色

border-left-width左边边框厚度

border-right 右边边框

border-top 上边边框

border-bottom下边边框

6，列表属性

list-style 列表样式

list-style: none 代表去样式即无样式

7, display 属性

display 可以让块级标签变成内联标签代码：display: inline，

也可以让内联标签编程块级标签代码：display: block，

更可以设置同时具有内联标签和块级标签的特征代码：display: inline-block

display: none 代表隐藏，隐藏此标签所有，隐藏后此标签会消失，同时位置也消失

注意：inline-block 默认标签与标签之间是有空格符，所以标签之间会有间隙

去除间隙的方法：

可以给几个标签加一个父级标签div,然后设置父级标签：div{word-spacing: -8px;} word-spacing 值可根据实际自己调

8，外边距与内边距

margin:用于控制元素与元素之间的距离；margin的基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的
padding: 用于控制内容与边框之间的距离即为：内边距
Border(边距）:围绕在内边距和内容外的边框
Content(内容）即为上图中的auto x auto : 盒子的内容，显示文本和图像

元素的宽度和高度

当设置CSS元素的宽度和高度时，我们只是设置内容区域的宽度和高度，要知道完全大小的元素，还必须添加填充边框和边距

margin ：距离值 ===》代表：默认上下左右的距离都为距离值

margin: 距离值1 距离值2 距离值3 距离值4 ====》代表分别是上右下左的边距值

margin: 距离值1 距离值2 距离值3 =====》代表分别是：上：距离值1 左右：距离值2 下：距离值3

margin: 距离值1 距离值2 ====》代表分别是：上下：距离值1 左右：距离值2

padding 同上

注意:<body>标签也有默认margin,设置时需注意

注意：margin collapse 边界塌陷或者边界重叠

1)兄弟div:上面的div margin-botton 和下面的div的margin-top会塌陷，也就是取上下2个margin中的最大的那个作为显示值

2）父子div

如果父级div中没有border,padding,inine content中的其中一个,子级div的margin会一直往上找，直到找到某个标签包括border,padding,inine content 中的其中一个，然后按此div进行margin

9，float属性

脱离文档流：也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当作脱离文档流的元素不存在而定位

只有绝对定位absolute和浮动float才会脱离文档流

浮动的表现：

定义：浮动的框可以向左或者向右移动，直到它的外边缘碰到包含框或者另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的浮动框之后的块框表现的像浮动框不存在一样（注意：这里是块框不是内联元素，浮动框只对它后面的元素造成印象）

注意：当初float被设计的时候就是用来完成文本环绕的效果，所以文本不会挡住，这是float特性即：float是一种不彻底的脱离文档流方式。其基本的出发点是：“如何在一行显示多个div 元素”

清除浮动：

clear 语法：

clear : none 默认值，允许两边都可以有浮动对象

clear : left 代表：不允许左边有浮动对象

clear : right 代表：不允许右边有浮动对象

clear : both 代表：不允许有浮动对象

但需要注意的是：clear属性只会对自身起作用，而不会影响其他元素。如果一个元素的右侧有一个浮动对象，而这个元素设置了不允许右边有浮动对象即：clear:right ,则这个元素会自动移到下一格，达到本元素右边没有浮动对象的目的

标签：常用,设置,标签,边框,background,margin,border,CSS,属性
来源： https://www.cnblogs.com/wode110/p/15054897.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

CSS常用属性

CSS常用属性