CSS语法

原创 2007年10月01日 19:27:00
 
1、CSS详解
样式表概述
HTML只不过是构成一个文本文件的一系列标签,而具体来指定其构成标签是如何显示的,就需要用到样式表了。导入样式表之后,在HTML中许多无法实现的功能均可实现,而且,HTML会变得简洁,容量也会减少。从而会大幅度的使网页的更新或修改操作变得非常容易。另外,在HTML中去除了有关显示方面的限制。因此,网页就能够在更多的环境中使用,增加了网页的通用性
CSS是最广泛使用的样式表
基本语法格式
CSS样式为一个文挡定义显示规则,通常放在一个单独的文件中,是由应用这些样式的Web页面来引用,另外,也可以在Web页面中定义样式规则
一个样式规则由两部分组成:选择器和样式声明:
选择器{属性:值}
选择器表明要为哪一个元素设置样式,样式声明则表明要应用哪些样式属性。加上分号之后还可以指定多个样式
颜色的指定方法
用CSS指定颜色有以下5种方法:
1、用十六进制指定1:(#RRGGBB)
2、用十六进制指定2:(#RGB)
3、用十进制来指定(RGB(n,n,n)形式)
4、用%来指定(RGB(n%,n%,n%)形式)
5、用颜色名称指定
关于边框线
各个标签都是在边框线的四边形区域当中生成的,这个区域由以下几部分组成:
内容(content):内容是用于显示文字和图像等标签内容的区域,这个区域的宽和高可以用width属性和height属性来指定
内容周围的填充(padding):填充是用于显示内容和边框线之间的区域。针对标签所指定的背景可以在其中显示
边框线(border):边框线是用于显示标签四周边缘的线框
边距(margin):边框线最外侧的是边距区域。当标签指定背景时,这一部分是不显示的。背景通常在这里面是透明的
2、以不同的方式导入CSS样式表
导入用CSS编写的文件
<link rel=”stylesheet” href=”URL” type=”text/css”>
URL:导入CSS文件的URL
若准备了只记录了样式表的其他文件(扩展名通常为css),想把这个文件导入到HTML文件中应用的时候,就要使用link标签
这个标签一定要放置在<head>~</head>的范围之内,如果想要导入多个CSS文件,可以按照需要的数量放置相应数目的标签
导入style标签的内容
<style type=”text/css”>~</style>
这个标签一定要放置在<head>~</head>的范围之内,在<style>~</style>范围中,可以直接写CSS代码。在不吃样式表的浏览器中,会把CSS代码作为文字来显示。这时为了避免这种现象,将会把CSS代码整体作为HTML的注释
往任意标签中导入样式表作为style属性的值
<标签名 style=”样式表”>
在HTML文件的任意标签中添加style属性,将可以导入只对该标签起作用的的CSS代码
3、设置不同的应用对象
应用于特定标签
标签名{~}
应用于特定标签
标签名,标签名,标签名,…{~}
应用于全部标签
*{~}
这是针对全部标签应用样式时的写法。*号单独使用时不能省略。如果后面有“#ID名”和“.类名”的话,*号就可以省略
应用于指定了ID或者类的标签
#ID名{~}
.类名{~}
标签名 ID名{~}
标签名.类名{~}
这是在以用id属性和class属性加了特定的名称标签,为目标对象应用样式时的写法。“#ID名”和“.类名”分别是“*#ID名”和“*.类名”的缩略形式。指定了ID名或类名的全部标签都是目标对象。若指定为“标签名 ID名{~}”或者“标签名.类名{~}”这样的形式之后,那么指定了ID名或者类名的“标签名”的标签才算是目标对象
id属性是对于某个标签添加了该HTML文件中固有名称的一个属性。Class属性是表示该标签的种类名的属性。因此,在同一个HTML文件中,同一个类名可以指定多个,但是ID名只能指定一处
应用于链接部分
标签名:link{~}:还没有看到的链接部分的样式
标签名:visited{~}:已经看到的链接部分的样式
标签名:hover{~}:光标放置在该标签上时的样式
标签名:active{~}:鼠标单击时链接部分的样式
通常,“标签名”的部分就是a,在“标签名”的部分指定了“#ID名”和“.类名”之后,对特定的链接部分就可以应用别的样式
这四种状态要按照上述顺序来指定
应用于首行
标签名:first-line{~}
应用于第一个文字
标签名:first-letter{~}
应用于包含在特定标签中的标签
标签名 标签名{~}
4、设置字体属性
设置文字颜色
color:设置颜色
设置字体
font-family:字体名,字体名…
设置字号
font-size:字号
设置字体粗细
font-weight:粗细
设置字体格式
font-style:斜体
text-decoration:修饰
综合设置字体属性
font:斜体 粗细 字号/行高 字体名
用font属性可以综合指定字体相关的属性值。字号和行高之间要用斜杠隔开。其他值要用半角空格隔开。另外,这些值基本上是按照上面所述的顺序来指定
5、设置文本格式
设置行高
line-height:行高
设置行对齐方式
text-align:行对齐方式
设置垂直方向的对齐方式
vertical-align:垂直方向的对齐
设置文字间距和单词间距
letter-spacing:文字间距
word-spacing:单词间距
设置首行缩进
text-indent:缩进
按照原始版本显示空格和换行
white-space:pre
不换行显示文本
white-space:nowrap
全部使用大写字母或小写字母显示
text-transform:指定大写字母和小写字母
6、设置网页中的背景
设置背景颜色
background-color:设置颜色
背景的使用范围包括边框线
设置背景图像
background-image:url(URL)
设置背景图像的排列方式
background-repeat:排列方式
设置背景图像的显示位置
background-position:显示位置
固定背景图像
background-attachment:是否固定
综合设置背景相关属性
background:与背景相关的属性值
7、设置页面边框
设置边距
margin-top:上边距
margin-bottom:下边距
margin-left:左边距
margin-right:右边距
margin:上下左右边距
设置文本周围的间距
padding-top:上边的距离
padding-bottom:下边的距离
padding-left:左边的距离
padding-right:右边的距离
padding:上下左右的距离
指定内容与边框线之间的距离
设置边框线的粗度
border-top-width:上边框的粗度
border-bottom-width:下边框的粗度
border-left-width:左边框的粗度
border-right-width:右边框的粗度
border-width:上下左右边框的粗度
设置边框线的颜色
border-top-color:上边框线的颜色
border-bottom-color:下边框线的颜色
border-left-color:左边框线的颜色
border-right-color:右边框线的颜色
border-color:上下左右边框线的颜色
设置边框线的样式
border-top-style:上边框的样式
border-bottom-style:下边框的样式
border-left-style:左边框的样式
border-right-style:右边框的样式
border-style:上下左右边框的样式
综合设置边框线
border-top:设置上边框线
border-bottom:设置下边框线
border-left:设置左边框线
border-right:设置右边框线
border:把上下左右边的边框设置为同一值
设置显示内容的宽和高
width:宽
height:高
8、调整网页布局
设置图文的左右分布和环绕
float:放置位置
放置位置:left,right,none
解除环绕效果
clear:对哪一侧的文字解除环绕
设置内容居中
margin:auto
将标签放置在绝对位置上
position:absolute 表示绝对位置
top:与上边的距离
bottom:与下边的距离
left:与左边的距离
right:与右边的距离
将标签放置在相对位置上
position:relative 表示相对位置
top:与上边的距离
bottom:与下边的距离
left:与左边的距离
right:与右边的距离
将标签固定在绝对位置上
position:fixed表示固定位置
top:与上边的距离
bottom:与下边的距离
left:与左边的距离
right:与右边的距离
指定重叠顺序
z-index:重叠顺序
隐藏
display:none 将标签设置为隐藏状态
visibility:hidden 将保留区域设置为隐藏状态
设置超出范围的处理方法
overflow:显示形式
9、设置列表样式
改变列表的标记和种类
list-style-type:种类
利用图像制作列表标记
list-style-image:url(URL)
把列表标记显示在文字段落的内侧
list-style-position:显示位置
综合设置列表标记
list-style:列表相关的属性值
10、设置表格属性
将表格的边框线设置为单一线条
border-collapse:表格边框的显示形式
collapse:表格的外框和各个单元格的边框重叠显示
separate:表格的外框和各个单元格的边框分开显示
设置单元格之间的距离
border-spacing:距离
将表格标题放置在下面显示
caption-side:放置位置
设置是否显示空单元格的边框线
empty-cells:是否显示边框线
是否显示边框线:show,hide
11、关于CSS的其他相关内容
设置指针形状
cursor:形状
cursor:url(URL)
在标签的前后添加文字或图像
标签名:before{content:文字} 在前面添加文字
标签名:before{content:url(URL)} 在前面添加图像
标签名:after{content:文字} 在后面添加文字
标签名:after{content:url(URL)} 在后面添加图像
添加注释
    /*注释语句*/
/*~*/是在往CSS的代码中添加注释时使用的
注意不能把注释设置为嵌套
 
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

CSS基础-介绍及语法

  • 2015-11-22 23:34
  • 132KB
  • 下载

CSS基本语法

1. 基本语法   CSS的定义是由三个部分构成:选择符(selector),属性(properties)和属性的取值(value)。   基本格式如下: selector {property: va...

-CSS——基本结构与语法

  • 2013-01-08 14:47
  • 212KB
  • 下载

PHP.7-HTML+CSS(一)-HTML语法、常用字符实体、颜色代码

HTML+CSS HTML是WEB页面的描述性语言,浏览器解释的语言 CSS则是为HTML制定样式的机制,为浏览器解释的语言。它不能独立使用,没有HTML就没有CSS,定义网页的外观和...

CSS语法手册

  • 2014-09-09 12:48
  • 116KB
  • 下载

CSS-Day01-基本语法

CSS 概述: - CSS 指层叠样式表 (Cascading Style Sheets) - 样式定义如何显示 HTML 元素 - 样式通常存储在样式表中 - 把样式添加到 HTML...

CSS语法文档

  • 2013-04-29 09:01
  • 603KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)