码迷,mamicode.com
首页 > Web开发 > 详细

css样式使用_css

时间:2020-04-12 08:03:38      阅读:93      评论:0      收藏:0      [点我收藏+]

标签:透明   层叠样   类型   tom   网页   absolute   text   组合   ali   

一、css简介

css,层叠样式表(英文全称:Cascading Style Sheets),用于修饰html

 

二、css选择器

1、id选择器:利用标签id属性进行匹配

#id值{样式设置}

2、class选择器:利用标签的class属性进匹配

.class值{样式设置}

3、标签选择器

标签类型{样式设置}

4、层级选择器

.c1 .c2 div{}

5、组合选择器

.c1,.c2,div{}

6、属性选择器(对选择的标签再次通过属性进行筛选)

.c1[n=‘chen‘]{}

注:样式使用的优先级:标签上的style优先,然后根据表秀尔顺序,越靠近标签越优先

可在头部直接通过   <link rel="stylesheet" href="css文件">  将css文件引用

 

三、常见css属性

color : #999999; /*文字颜色*/
font-size : 9pt; /*文字大小*/
font-style:itelic; /*文字斜体*/
line-height : 200%; /*设置行高*/ (居中常用)
font-weight:bold; /*文字粗体*/
text-align:center; /*文字中间对齐*/  (居中常用)

padding-top:10px; /*上边框留空白*/
padding-right:10px; /*右边框留空白*/
padding-bottom:10px; /*下边框留空白*/
padding-left:10px; /*左边框留空白

background-image : url(/image/bg.gif); /*背景图片*/
background-repeat : repeat; /*重复排列-网页默认*/
background-repeat : no-repeat; /*不重复排列*/
background-repeat : repeat-x; /*在x轴重复排列*/
background-repeat : repeat-y; /*在y轴重复排列*/
指定背景位置
background-position : 90% 90%; /*背景图片x与y轴的位置*/
background-position : top; /*向上对齐*/
background-position : buttom; /*向下对齐*/
background-position : left; /*向左对齐*/
background-position : right; /*向右对齐*/
background-position : center; /*居中对齐*

a:active /*按下链接的格式*/
a:hover /*鼠标转到链接*/

border-top : 1px solid #6699cc; /*上框线*/
border-bottom : 1px solid #6699cc; /*下框线*/
border-left : 1px solid #6699cc; /*左框线*/  
border-right : 1px solid #6699cc; /*右框线*/
border-top-color : #369 /*设置上框线top颜色*/
border-top-width :1px /*设置上框线top宽度*/
border-top-style : solid/*设置上框线top样式*/

solid /*实线框*/
dotted /*虚线框*/
double /*双线框*/
groove /*立体内凸框*/
ridge /*立体浮雕框*/
inset /*凹框*/
outset /*凸框*/

margin-top:10px; /*上边界*/
margin-right:10px; /*右边界值*/
margin-bottom:10px; /*下边界值*/
margin-left:10px; /*左边界值*/

position:relative|absolute|fixed 定位
opacity:透明度级别
z-index:层级顺序

display:none|inline|block|inline-block 显示与否以及块级和行内标签转换

float :right|left 让标签飘起来

css样式使用_css

标签:透明   层叠样   类型   tom   网页   absolute   text   组合   ali   

原文地址:https://www.cnblogs.com/chenxiaozan/p/12683335.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!