css
上一篇 /
下一篇 2012-09-11 21:50:21
样式表的核心规则 选择符{属性1：值；属性2：值2；} 例：h1{color:green;} 2. 样式表放在那个地方 内部的CSS、外部的CSS 内部的CSS: (1) 直接在html代码行中加入样式规则。例题:first.html 语法格式如下：<标签名 style=”样式属性:属性值;样式属性:属性值;….”> <h1 style=”color:red;font-size:35px;font-family:隶书”>样式表</h1> <p style=”background:yellow;color:blue;font-size:25px;”>这是在行内加入样式的效果</p> (2) 将样式表嵌入到html文件的文件头中。例题：first2.html <html> <head><title></title> <style. type=”text/css”> <!-- 选择符1{样式属性:属性值;样式属性:属性值;…} 选择符2{样式属性:属性值;样式属性:属性值;…} 选择符3{样式属性:属性值;样式属性:属性值;…} - -> </style> </head> <body> </body> </html> (3) 将一个外部样式表连接到html文件中例题:first3.html <html> <head><title></title> <link rel=”stylesheet” href=”*.css” type=”text/css”> </head> <body></body> </html> (4) 将一个外部样式表输入到html文件中：例题:first4.html <html> <head><title></title> <style. type=”text/css”> <!-- @import url(外部样式表的文件名); - -> </style> </head> <body></body> </html>
1)CSS样式的编写 选择符组(可以把相同属性和值的选择符组合起来书写，用逗号将选择符分开，这样可以减少样式重复定义) 例如：p,table,td,th{font-size:9pt;} (2)类选择符 用类选择符能把相同的元素分类定义不同的样式，定义类选择符时，在自定类的名称前面加一个点号。(一种是：html标记名+“。”+类名。第二种：“。”+类名,第二种是经常使用的方式) 例如：p.right{text-align:right;} .right{text-align:right;} <p class=”right”>这个段落向右对齐的</p> (3)ID选择符 与CLASS选择符类似，把CLASS换成ID就可以了 定义ID选择符要在ID名称前加上一个“#”号。 (4)包含选择符 可以单独对某种元素包含关系定义的样式表，例如元素1里包含元素2 例如： table a{font-size:12px;}这条样式只对表格内的链接改变了样式后，文字的大小为12像素，而表格外的链接的文字不变 4. 样式的优先级 ID样式的优先级高于CLASS，再其次是html标签选择符，如果想超越这三者之间的关系可以使用!import提升样式表的优先权。实例:css_jibie.html 5. 样式表的继承性 所在元素中嵌套的元素都会继承外层元素指定的属性值 例如： div{color:red;font-size:9pt;} ……. <div><p>这个段落的文字为红色9号字</p></div> 6. CSS的注释 /**/ 7. 伪类 伪类可以看做是一种特殊的类选择符，是能被支持CSS的浏览器自动识别的特殊选择符，它的最大好处就是可以对链接在不同状态下定义不同的样式效果 书写顺序: a:link,a:visited,a:hover,a:actived a:link { /*未访问的链接未访问的链接未访问的链接未访问的链接*/ color:#FF0000; text-decoration:no } a:visited{ /*已访问的链接已访问的链接已访问的链接已访问的链接*/ color:#00ff00; text-decoration:none; } a:hover{ /*鼠标在链接上鼠标在链接上鼠标在链接上鼠标在链接上*/ color:#FF00FF; text-decoration:underline; } a:active{ /*激活链接激活链接激活链接激活链接*/ color:#0000ff; text-decoration:underline; } 将伪类和类组合起来用将伪类和类组合起来用将伪类和类组合起来用将伪类和类组合起来用，，，，就可以在同一个页面中做几组不同的链接效果就可以在同一个页面中做几组不同的链接效果就可以在同一个页面中做几组不同的链接效果就可以在同一个页面中做几组不同的链接效果：：：： 例如例如例如例如：：：： a.red:link{color:#FF0000;} a.red:link{color:#0000FF;} a.blue:link{color:#00FF00;} a.blue:visited{color:#FF00FF} < a cl ass=”red” href=””>这是第一组链接这是第一组链接这是第一组链接这是第一组链接</ a> < a cl ass=”blue” href=””>这是第二组链接这是第二组链接这是第二组链接这是第二组链接</ a> 首行和首字的伪类首行和首字的伪类首行和首字的伪类首行和首字的伪类，，，，可以对元素的首字或首行设定不同的样式可以对元素的首字或首行设定不同的样式可以对元素的首字或首行设定不同的样式可以对元素的首字或首行设定不同的样式：：：： 例如例如例如例如：：：： <style. type=”text/css”> p:first-letter{font-size:300%;} </style> <p>这是一个段落这是一个段落这是一个段落这是一个段落，，，，这个段落的首字被放大了这个段落的首字被放大了这个段落的首字被放大了这个段落的首字被放大了</p> 8. 文本属性 Line-height:行高值 word- spacing:定义各个单词之间的间距 letter-spacing:定义每个字母之间的间距 text-decoration:定义文字的装饰样式（例如下划线等等） text-indent:定义文本的首行的缩进 text-align:行对齐方式 vertical-align :垂直方向的对齐 9.边距属性 属性 属性含义 属性值 margin-top: 设置顶端边距 length|percentage|auto margin-right: 设置右侧边距 length|percentage|auto margin-bottom: 设置底端边距 length|percentage|auto margin-left 设置左侧边距 length|percentage|auto 10．填充距的属性 属性 属性含义 属性值 Padding-top ：设置顶端填充距 length|percentage|auto Padding-right：设置右侧填充距 。。。。。。 Padding-bottom：设置底端填充距 。。。。。。 Padding-left:设置左侧填充距 。。。11.边框属性（略） 表单的美化 12.图文混排 属性 属性含义 属性值 width 定义宽度属性 length|percentage|auto height 定义高度属性 length|auto Float 使文字环绕在一个元素的四周 left|right\none clear 定义某一边是否有环绕文字 left|right|none|both 13.列表属性 14.滤镜的简介 CSS的滤镜属性的标识符是filter. 基本书写格式: filter:filtername(parameters) 只要进行滤镜操作，就必须先定义filter,filtername是滤镜属性名，这里包括alpha、blur、chroma等等多
收藏
举报
TAG:
