CSS基础教程之常用属性

分类:WEB前端 时间:

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

一、CSS样式引入的方式
1.外部样式表

1
<link type="text/css" rel="stylesheet" href="./css.css" />

2.内部样式表

1
<style type="text/css"></style>

3.内联样式

1
<div style="属性名:属性值;属性名:属性值;"></div>

二、布局常用样式属性和盒子原理(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这些属性,可以有效地防止部分浏览器样式不兼容现象

标签:
来源:CSS基础教程之常用属性

发表评论

电子邮件地址不会被公开。 必填项已用*标注