网页样式css总结

网页样式css总结

ID:12449221

大小:19.30 KB

页数:18页

时间:2018-07-17

网页样式css总结_第1页
网页样式css总结_第2页
网页样式css总结_第3页
网页样式css总结_第4页
网页样式css总结_第5页
资源描述:

《网页样式css总结》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库

1、第二章网页样式CSS总结一、CSS的概念与作用Css全称为级联样式表(CascadingStyleSheet),通常又称为风格样式表(StyleSheet),是用来进行网页风格设计的。通过设立样式表,可以统一控制HTML中各标签的显示属性。CSS可以更有效地控制网页外观。使用CSS,可以精确的定位网页元素的位置,美化网页外观。一个合理的CSS,还能有效地节省网络带宽,提高用户体验。同时,使用CSS制作网页,还有以下优点:1、内容与表现分离。有了CSS,网页的内容(XHTML)与表现就可以分开了。2、表现统一。可以使网页的表现非常统一,并且容易修改。3、丰富的样式。使得页

2、面布局更加灵活。4、减少网页的代码量,增加网页的浏览速度,节省网络带宽。5、运用独立于页面的CSS,还有利于网页被搜索引擎收录。二、

标签
标签可以用于定义HTML文档中的分区或节,即可以把HTML文档分割为独立的、不同的部分。
标签就像一个容器,可以放置其他的HTML标签,如段落,列表,图片,表单等。CSS的基本语法结构:=“text/css”>选择器{属性:属性值;......}选择器:表示被修饰的对象,如页面中被修饰的段落标签

、列表标签

  • 等。属性:希望改变的样式,如颜色color、字体大小f

    3、ont—size等,属性和属性值用冒号(:)隔开。例如,设置页面中所有的

  • 标签的文字颜色为红色,字体大小为15px,对应的样式代码如下:Li{color:#ff0000;font—size:15px;}二、CSS选择器:根据选择器表示所修饰的内容类别,选择器又分为标签选择器、类选择器、ID选择器、并集选择器和后代选择器。其中,前3类是CSS的基本选择器,后2类是由多个选择器或标签复合而成的选择器,简称复合选择器。1、标签选择器当需要对页面内HTML标签的内容进行修饰时,则采用标签选择器。标签选择器的语法:

    4、标签名{属性:属性值;.......}例如,设置页面中

    标签中的文本颜色为灰色,字体大小为28px,代码如下所示:h1{Color:#cccccc;font—size:28px;}1、类选择器使用标签选择器修饰的范围比较广,是针对某一类的表签进行修饰,如果希望设置个别标签的样式,那么就使用类选择器。类选择器的语法:.类名{属性:属性值;.......}类名可以任意选择,应用样式时使用标签的class属性引用类样式,即:<标签名class=“类名”>标签内容2、ID选择器ID属性是HTML元素的唯一标志,因此要求页面内不能有重复的ID标记属性,W3C以将

    5、ID属性定义为HTML元素的标准属性。对应的ID选择器一般用于修饰对应ID标记的HTML元素内容。ID选择器的语法:#ID名称{属性:属性值;.......}1、并集选择器:并集选择器是多个选择器通过逗号连接而成的,是复合选择器之一。在声明各种CSS选择器时,如果某些选择器的风格是完全相同的,或者部分相同,这时便可以利用并集选择器同时声明风格相同的CSS选择器。并集选择器的语法:标签名,类名,#ID名称{属性:属性值;.......}5、后代选择器后代选择器也是复合选择器中的一种,主要通过嵌套的方式对特殊位置的HTML标签进行声明。后代选择器的写法是把外层的表签写在后面

    6、,之间用空格分隔。当标签发生嵌套时,内层的表签就成为外层标签的后代。后代选择器的语法:pspan{属性:属性值;........}四、CSS的继承性:所有的CSS语句都是居于各个标签之间的继承关系的,为了更好的理解继承关系,首先要从HTML文件的组织结构入手。样式优先级:样式的优先级可以分为以下几种:1、基本选择器之间:ID选择器>类选择器>标签选择器。2、样式表之间:行内样式>内嵌样式>外部样式。3、CSS样式之间:在同一个选择器中,两条相同的声明,后一条声明会覆盖前一条声明,即显示后一条声明的结果。五、CSS属性:CSS文字属性:color:#999999;/*文字

    7、颜色*/font-family:宋体,sans-serif;/*文字字体*/font-size:9pt;/*文字大小*/font-style:itelic;/*文字斜体*/font-variant:small-caps;/*小字体*/letter-spacing:1pt;/*字间距离*/line-height:200%;/*设置行高*/font-weight:bold;/*文字粗体*/vertical-align:sub;/*下标字*/vertical-align:super;/*上标字*/text-decoration:line-thr

  • 当前文档最多预览五页,下载文档查看全文

    此文档下载收益归作者所有

    当前文档最多预览五页,下载文档查看全文
    温馨提示:
    1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
    2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
    3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
    4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。