CSS的样式

╰半橙微兮° 2022-01-17 11:35 316阅读 0赞

1.1.1 边框和尺寸：border、width、height  
l border ：设置边框的样式  
n 格式：宽度 样式 颜色  
n 例如：style=”border:1px solid \#f00” ，1像素实边红色。  
l 样式取值：solid 实线，none 无边，double 双线 等  
l width、height：用于设置标签的宽度、高度。

![CSS的样式][CSS]  
1.1.2 转换：display  
HTML提供丰富的标签，这些标签被定义成了不同的类型，一般分为：块标签和行内标签。  
l 块标签：以区域块方式出现。每个块标签独自占据一整行或多整行。  
n 常见的块元素：<h1>、<div>、<ul>等  
l 行内元素：不必在新的一行开始，同时也不强迫其他元素在新的一行显示。  
n 常见的行内元素：<span>、<a> 等  
在开发中，希望行内元素具有块元素的特性，需要使用display进行转换

选择器{display:属性值}
    
    常用的属性值：
    
    inline：此元素将显示为行内元素（行内元素默认的display属性值）
    
    block：此元素将显为块元素（块元素默认的display属性值）
    
    none：此元素将被隐藏，不显示，也不占用页面空间。
    
    例如：
    
    <html>
    
    <head>
    
    <meta charset="UTF-8">
    
    <title></title>
    
    <style type="text/css">
    
    span{
    
    border :1px solid #000;
    
    width:100px;
    
    height:40px;
    
    }
    
    </style>
    
    </head>
    
    <body>
    
    
    
    <span>显示1-1</span>
    
    <span>显示1-2</span>
    
    
    
    <span style="display: block;">显示2-1</span>
    
    <span style="display: block;">显示2-2</span>
    
    </body>
    
    </html>

![CSS的样式][CSS 1]  
1.1.3 字体：color、font-size

color：颜色，字体颜色

![CSS的样式][CSS 2]  
1.1.4 背景色：background-color

![CSS的样式][CSS 3]  
1.1.5 布局：float、clear  
通常默认的排版方式，将页面中的元素从上到下一一罗列，而实际开发中，需要左右方式进行排版，就需要使用浮动

选择器{float:属性值;}
    
    常用属性值：
    
    left：元素向左浮动
    
    right：元素向右浮动
    
    none：元素不浮动（默认值）

由于浮动元素不再占用原文档流的位置，所以它会对页面中其他元素的排版产生影响。如果要避免影响，需要使用clear属性进行清除浮动。

选择器{clear:属性值;}
    
    常用属性值：
    
    left：不允许左侧有浮动元素（清除左侧浮动的影响）
    
    right：不允许右侧有浮动元素（清除右侧浮动的影响）
    
    both：同时清除左右两侧浮动的影响
    
    例如：
    
    
    
    <div>
    
    <div>区域1-1</div>
    
    <div>区域1-2</div>
    
    </div>
    
    <hr />
    
    
    
    <div>
    
    <div style="float: left;">区域2-1</div>
    
    <div style="float: left;">区域2-2</div>
    
    </div>
    
    
    
    <div style="clear:both"></div>
    
    <hr />
    
    <div>
    
    <div style="float: left;">区域2-1</div>
    
    <div style="float: left;">区域2-2</div>
    
    <div style="float: left;">区域2-3</div>
    
    </div>

![CSS的样式][CSS 4]

转载于:https://blog.51cto.com/13587708/2389613

[CSS]: https://s1.51cto.com/images/blog/201905/06/3773f43402988a0d1c284934c4329596.jpg?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[CSS 1]: https://s1.51cto.com/images/blog/201905/06/bb7424f407c36ff8eba526aab1d51daf.jpg?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[CSS 2]: https://s1.51cto.com/images/blog/201905/06/d1d135a10d07523add77dc9b0c3c30b2.jpg?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[CSS 3]: https://s1.51cto.com/images/blog/201905/06/c8d7e9f6b3cedf5d04227315507a1011.jpg?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
[CSS 4]: https://s1.51cto.com/images/blog/201905/06/4142e92b8d8c8a91fae4b69283d0772a.jpg?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=