css 各种样式属性详解

一、 css 重要性

1. html 掌握三部分,就可以上手项目了,一个 html 页面的各种元素(控件)。
   比如: <div> <span> <li> <link ><a> <img> ....等等 。

2. css 样式布局,样式布局是页面的灵魂,没有样式的页面看起来一塌糊涂,乱七八糟,给人的感觉是糟糕。
而拥有好的样式的布局的页面给人的感觉是愉快的,看起来舒服。

3. js 文件和 响应事件 

所以可想而知,熟知css 中的各种样式属性的作用是特别重要的。能让你快速的布局出漂亮的网页页面。

二、css 样式属性

// 这里我会讲一些比较常用、简单的样式属性,复杂一点的,我会另外写文章单独去讲,请读者关注笔者其他文章。

margin -- 控件边缘相对父空间的边距。
margin: 0:  指上下左右距离0。
margin: 0  10px: 指上下距离0,左右距离为 10px。

padding -- 控件的内容相对控件的边缘的边距。
padding: 0  指内边距上下左右为0
padding: 0  10px: 指上下内边距为0,左右内边距为 10px。

color -- 字体颜色
color: red  指字体的颜色为红色。

background-color -- 背景的颜色
background-color: red  指背景的颜色为红色。

border -- 边框的宽度
border: 2px   指边框的宽度为2px。

table的border-collapse属性与border-spacing属性
border-collapse:collapse; 表示边框合并在一起。
border-collapse:separate;表示边框之间的间距,间距的大小用border-spacing:px;定义大小。

font-size -- 字体的大小
font-size: 14px   指字体的大小为14px。

text-decoration -- 下划线
text-decoration: none  无文本修饰,定义标准的文本。
text-decoration: underline  定义文本下的一条线。
text-decoration: overline  定义文本上的一条线。
text-decoration: line-through 定义穿过文本的一条线。
text-decoration: blink  定义闪烁的文本。
text-decoration: inherit 规定应该从父元素继承 text-decoration 属性的值。

width -- 宽度
width: 100px  指控件宽度为100px。

min-width -- 最小宽度
min-width: 100px 定义元素(控件)最小宽度,常和width 一起使用

height -- 高度
height: 100px  定义元素的高度为100px。

line-height -- 文字行高
line-height: 20px  定义文字的行高为20px。 

overflow --  元素溢出部分是否隐藏
overflow: hidden 定义元素溢出部分隐藏。

float -- 元素在哪个方向浮动,
float: left 元素朝左边方向浮动。
float: right 元素朝右边方向浮动。 float: left 和 float: right 常一起使用。

vertical-align  --  元素的垂直对齐方式
vertical-align: middle 定义元素垂直居中对齐。


    原文作者:走在路上的小二
    原文地址: https://www.jianshu.com/p/ebb4044c3080
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞