当前位置:Gxlcms > html代码 > CSS基础教程之常用属性_html/css_WEB-ITnose

CSS基础教程之常用属性_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:17人阅读

分类:WEB前端时间: 2015年9月9日

CSS在Web前端开发中,占有很重要的地位。CSS可以很好的解决内容和变现分离的问题,极大方便后期的维护。CSS样式引入的方式主要有外部样式表、内部样式表、内联样式三种。下面详细的介绍在web开发中css常用的属性。

一、CSS样式引入的方式

1.外部样式表

2.内部样式表

3.内联样式

二、布局常用样式属性和盒子原理(margin/padding)

border:1px solid red; 边框的样式值:solid实线,dashed虚线,dotted虚线。可以分别控制top:上,right右, bottom下,left左四条边。

width: 300px;height: 100px;background-color: yellow;background-image:url();

display: block(块级化)|none(隐藏)|inline(内联)|inline-block(块级并且在同一行)|table-cell(呈现表格特征)

margin 外边距

margin:10px;四边10px的缩写

margin:10px 15px 20px 5px;上右下左

margin:10px 15px; 上下10px 左右15px

margin-top|margin-right|margin-bottom|margin-left

margin:5px auto; 自动居中,一般情况下,元素必须有固定宽度。

padding:内边距,用法和margin一样

三、文字属性(默认继承父元素的样式)

font-size:60px;大小

color:red;颜色

font-weight:bold; 100-900中间的任何一个整百数值,400代表正常粗细,没有单位

font-style: italic;字体样式

line-height: 60px;行高

font-family: 黑体,Arial;字体

text-align: right|left|center;水平对齐方式

text-indent: 10px;首行文本的缩进

text-decoration: underline|overline|line-through|none;装饰效果

letter-spacing: 20px;字符间距

break-word:文本断开换行属性

word-break:break-all | keep-all 单词换行属性

vertical-align:sub|super|;文本垂直对齐,M的平方

layout-flow:vertical-ideographic;文本垂直排列

cursor:pointer;鼠标指针形状

list-style: none|armenian(圆点)|circle(空心圆点)|decimal(数字,最大值999,多于999行以后,会自动变成001)|lower-alpha(英文小写字母)|url(图片地址);

四、背景background属性

background-image: url(./images/leixuesong.jpg);背景图片

background-color: #FFCC00;背景颜色

background-repeat: no-repeat|repeat-x|repeat-y;如何重复背景图片

background-position: -50px -50px; left|right|center|top|bottom背景图片位置

background: url(./images/002.png) no-repeat -100px -150px;background所有属性的缩写

五、浮动与定位

float:left|right;一般情况下需要设置元素的宽度

clear:left|right|both(两端);清除浮动一般配合float使用,both一般单独使用

overflow:hidden|auto|scroll;可以根据标签大小自动显示滚动条,水平或者垂直方向,防止元素内容溢出

position: absolute|static|fixed|relative;

z-index: 100;

left: 100px;

top: 100px;

position: relative;父元素

position: absolute;子元素

块级元素一个最重要的特点就是,独占一行,非块级元素(内联元素)最重要的特点,都在同一行。display,清除浮动,overflow这些属性,可以有效地防止部分浏览器样式不兼容现象

人气教程排行