Home > Web Front-end > HTML Tutorial > CSS基础教程之常用属性_html/css_WEB-ITnose

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

WBOY
Release: 2016-06-21 08:48:58
Original
1069 people have browsed it

分类: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这些属性,可以有效地防止部分浏览器样式不兼容现象

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template