CSS基础语法

CSS
基础语法
CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。
selector {declaration1; declaration2; … declarationN }
选择器通常是你需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性(property)是你希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。
selector {property: value}

常见的选择器
ID选择器—-可以为标有特定 id 的 HTML 元素指定特定的样式,以 “#” 来定义

#red {color:red;}
#green {color:green;}

id 选择器和派生选择器
在现代布局中,id 选择器常常用于建立派生选择器

#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}

class选择器—-以一个点号显示

.center {text-align: center;}

class 也可被用作派生选择器:

.fancy td {
color: #f60;
background: #666;
}

【注意】类名的第一个字符不能使用数字!它无法在 Mozilla 或 Firefox 中起作用。

标签选择器(元素选择器)

这种是最常见的,换句话说,文档的元素就是最基本的选择器。
如果设置 HTML 的样式,选择器通常将是某个 HTML 元素,比如 p、h1、em、a,甚至可以是 html 本身:

html {color:black;}
h1 {color:blue;}
h2 {color:silver;}

属性选择器—-对带有指定属性的 HTML 元素设置样式

<!--设置样式-->
[title]
{
color:red;
}

<a title="W3School" href="http://w3school.com.cn">W3School</a>

CSS设置背景(background)
背景颜色 background-color
背景图片 background-image
背景重复 background-repeat:repeat-x/repeat-y
背景位置 background-position:bottom/left/top/right/center
背景关联 background-attachment:fixed/scroll

综合写法:
.tagName{background:#ffffff url(“aa.jpg”) no-repeat right left;}

CSS设置文本格式
通过文本属性,您可以改变文本的颜色、字符间距,对齐文本,装饰文本,对文本进行缩进,等等。

文本缩进 :Text-indent:2em
文本对齐方式:Text-align:left/right/center/ justify
文本修饰:Text-decoration:underline/line-through/overline/none
字符间距:Word-spacing:px/em 英文单词之间的间隔;
Letter-spacing:px/em汉字和英文字母之间的间隔;
文本转换:Text-transform:uppercase/lowercase/ capitalize
行与行间距:Line-height:px/%
垂直对齐图像: vertical-align:text-top/text-bottom
文本阴影:text-shadow:水平偏移,垂直偏移 颜色
字体
字体类型:font-family:”sans-serif”;
字体样式:font-style:normal ;
字体大小:font-size:20px/3.75em/100%;默认大小为16px,字体为宋体
字体加粗:font-weight:normal;
字体的转变:font-variant:normal/smallcaps;
CSS链接
链接的四种状态

a:link {color:#FF0000;} /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;} /* 正在被点击的链接 */

【注意】当为链接的不同状态设置样式时,请按照以下次序规则:
a:hover 必须位于 a:link 和 a:visited 之后
a:active 必须位于 a:hover 之后

去掉a链接默认的下划线
text-decoration:{none/underline}

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

创建链接块
display:block;

列表样式
在一个无序列表中,列表项的标志 (marker) 是出现在各列表项旁边的圆点。在有序列表中,标志可能是字母、数字或另外某种计数体系中的一个符号。
要修改用于列表项的标志类型,可以使用属性 list-style-type:

ul {list-style-type : square;}

上面的声明把无序列表中的列表项标志设置为方块。

列表项图像
你可能想对各标志使用一个图像,这可以利用 list-style-image 属性做到:

ul li {list-style-image : url(xxx.gif);}
1
列表标志位置

ul{
list-style-position:inside;
}

CSS表格
表格边框
table,th,td{border:1px solid red;}

折叠边框
border-collapse:collapse;

表格的宽度和高度
width,height
表格的文字水平对齐
text-align:center/right/left;
表格的文字垂直对齐
vertical-align:bottom;
表格的内边距
padding
表格的背景颜色
background

猜你喜欢

转载自www.cnblogs.com/jiangximing/p/9064272.html