css样式

发布时间:2020-08-29编辑:dyy阅读(1257)

css是层叠样式表,通常存储在样式表中,在html网页的基础上添加css文档就可以改变所有页面的布局和外观;

css样式是由选择器,以及一条或多条声明:p(选择器)  {color(添加属性):blue(值);font-size:12px;},选择器通通是需要改变样式的html元素;

blob.png

在HTML元素中设置CSS样式,在元素中设置"id" 和 "class"选择器,id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式,id=“123”,id必须在需要改变样式的HTML元素中注明;CSS 中 id 选择器以 "#" 来定义,注: ID属性不要以数字开头,数字开头的ID在  浏览器中不起作用。class选择器可以在多个元素中使用class 选择器在HTML中以class属性表示, 在 CSS 中,类选择器以一个点"."号显示;也可以指定特定的HTML元素使用class

blob.png          blob.png                blob.png         blob.png       blob.png      blob.png     继承更具体的样式表:color:red;text-align:right;font-size:20px;

创建样式表;外部样式表

当样式表需要应用于很多页面时,可以使用外部样式表,改变一个文件来改变多个页面的样式;可以使用<link>标签链接到样式表

浏览器会从css文件中读取样式说明,来格式文档

内部样式表:当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表

内联样式:当样式仅需要在一个元素上应用一次,在相关的标签内使用样式(style)属性

多重样式:如果某些属性在不同的样式表中被同样的选择器定义,那么属性值将从更具体的样式表中被继承过来

color :设置文本颜色;

background-color:定义了元素的背景颜色 .body {background-color:#b0c4de;}

background-image:元素的背景图像.body {background-image:url('paper.gif');}

background-repeat:设置定位于不平铺background-repeat:no-repeat;

 background-position:改变图像在背景中的位置background-position:right top;

"background":合并在同一个属性中:#ffffff url('img_tree.png') no-repeat right top;

text-align:center设置文本的水平对齐方式

text-align:right居中或对齐到左或右,两端对齐

text-align:justify每一行被展开为宽度相等,左,右外边距是对齐p.main {text-align:justify;}

text-decoration: 用来设置或删除文本的装饰a {text-decoration:none;}无样式

{text-decoration:overline;}顶线

text-decoration:line-through中线 text-decoration:underline文本下线

文本转换

p.uppercase {text-transform:uppercase;}大写           blob.png

p.lowercase {text-transform:lowercase;}小写

p.capitalize {text-transform:capitalize;}首字母大写

text-indent:指定文本的第一行的缩进p {text-indent:50px;}blob.png        blob.png

字体系列:font-family 属性设置文本的字体系列,font-family 属性应该设置几个字体名称作为一种"后备"机制,如果浏览器不支持第一种字体,他将尝试下一种字体,p{font-family:"Times New Roman", Times, serif;}后面的为后备字体;

字体样式:font-style,主要是用于指定斜体文字的字体样式属性,p.normal {font-style:normal;}正常显示文本    p.italic {font-style:italic;}以斜体字显示的文字    p.oblique {font-style:oblique;}文字向一边倾斜

设置小型大写字母的字体显示文本font-variant 属性     p.normal {font-variant:normal;}正常显示文本,font-variant:small-caps;设置为小型大写字母字体

设置不同的字体粗细   font-weight属性  p.normal {font-weight:normal;}正常文本   p.thick {font-weight:bold;}定义粗体字符    p.thicker {font-weight:lighter;}定义更细的字符      p.thicker {font-weight:900;}数字定义文本由粗到细的字符,400等于默认值,700等同于粗体;

字体大小font-size    单位:px

链接的样式,可以用任何CSS属性(如颜色,字体,背景等,不同的链接可以有不同的样式。

a:link {color:#000000;}a:link - 正常,未访问过的链接   a:visited {color:#00FF00;}  a:visited - 用户已访问过的链接   a:hover {color:#FF00FF;}当用户鼠标放在链接上时    a:active {color:#0000FF;} 链接被点击的那一刻     当设置为若干链路状态的样式,也有一些顺序规则:a:hover 必须跟在 a:link 和 a:visited后面,a:active 必须跟在 a:hover后面

链接样式自动删除添加下划线a:link {text-decoration:none;}正常状态下没有显示下划线       a:visited {text-decoration:none;} 访问过的链接也不显示下划线;a:hover {text-decoration:underline;}当鼠标放到链接上面显示下划线    a:active {text-decoration:underline;}鼠标点击链接显示下划线

列表:无序列表 - 列表项标记用特殊图形(如小黑点、小方框等)

  • 有序列表 - 列表项的标记有数字或字母,ist-style-type属性指定列表项标:

无序列表:ul.a {list-style-type:circle;} blob.png;ul.b {list-style-type:square;}blob.png

有序列表:ol.c {list-style-type:upper-roman;}blob.png  ;ol.d {list-style-type:lower-alpha;}blob.pngol.d {list-style-type:digital;}blob.png

定列表项标记的图像,使用列表样式图像属性:list-style-image:url('')

表格:使用css可以使HTML网页中的表格更美观;

使用border属性,改变一个表格边框的大小,颜色,实虚线,border:1px solid red;

border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开;blob.png

Width和height属性定义表格的宽度和高度%,px

表格中的文本对齐和垂直对齐属性:text-align,设置水平对齐方式,向左,右,或中心

text-align:aleft     blob.png

表格填充:表的内容中控制空格之间的边框(占中控位置),padding(px)

控制表格颜色:background-color,border:1px solid green



标签

评论