CSS

CSS简介:

  为了弥补HTML在样式排版功能上的不足而制定的一套扩展样式标准(若将建造一个网页比喻成盖一座房子,则HTML是毛胚房,CSS是精装修房)。

CSS特点:

  1)易于修改和使用:CSS可以将样式定义HTML文档的header部分中的style标签中/专门的CSS文件/html标签的style属性中。

  2)多页面应用:利用CSS文件,实现多个页面风格的统一。

  3)层叠:对一个元素多次设置同一个样式,这将使用最后一次设置的属性值。

  4)页面压缩:CSS样式表的复用更大程度缩减了页面的体积。

CSS优点:

  1)一个样式表可用于多个页面,有更好的易用性和扩展性。

  2)内容和样式分离,使网页设计简单明了。

  3)弥补了HTML对样式控制的不足(如标题、行间距、字间距等)。

  4)加快网页加载的速度,缩减带宽成本。

CSS基本语法:

  CSS的每个规则都包括三部分:

    选择器、样式属性、属性值。

  语法规范:

    selector{property:value[ ;property:value;…… property:value]}

    selector:选择器,指定了需要改变样式的HTML元素(若是多个以逗号分隔)。

    property:样式的属性,即样式的名称。

    value:样式的值。

    注:属性和值之间用冒号分开,多个声明(声明=样式属性+属性值)之间用分号隔开。

CSS作用方式:

  1.内联样式:HTML中每个元素均可设置其style属性, 设置相应的css样式。(无法做到通用和共享)

  2.内部样式表:通过在<head>元素中增加style标签设置样式(style标签所定义的区域是专门用来设置当前HTML页的元素样式,即这种方法只适用于单个文档)。

  3.外部样式文件:HTML引用一个单独的CSS文件。

  外部样式文件的引用方式:

    (1)<link>链接方式(放在<head>区)

        格式:<link rel="stylesheet" type="text/css" href="url" />

        说明:rel="stylesheet"指调用的相关文件为样式表文件。

           type="text/css"指引入的文件类型是样式表文本。

    (2)@import引入方式。

        格式:<style type="text/css">

            @import url("url");

           </style>

        说明:@import规定必须放在<style>标签的第一行。

    区别与联系:前者是建立一个链接,在HTML的标记需要CSS样式的时候才会以链接的方式引入;后者则是将样式文件内嵌到当前页面中,作为内容的一部分。

CSS选择器种类:

  1)元素选择器:直接指定HTML元素标签,设置CSS样式要作用的元素,若指定html元素标签(即多个元素使用同一组样式)有多个则用“,”隔开,允许使用“*”通配符(指定所有元素)。

  2)ID选择器:为锚点ID的HTML元素指定样式(以一个"#"开始)。

  3)类选择器:在HTML中以class属性表示,在CSS中,以一个点“.”开始定义。

  4)属性选择器:用某个属性名称作为选择器。格式:元素标签[属性名] {设置的CSS}(允许出现多个属性名,若元素标签的地方出现*表示所有带有该属性的标签都生效)

                         例:<style>

                          *[title] {color:red}

                          a[href][title] {color:red;}//若body标签a只有一个href/title属性则不生效

                          img[alt='default'] {border:solid 1px}//只对img标签中属性为alt且属性值为default生效

                           </style>

  5)派生选择器

    (1)后代选择器(允许两个元素之间的层次间隔是无限的)

      例:h1 em {color:red;}//当em标签在h1中对em标签中的内容生效(标签的嵌套)

    (2)子元素选择器:选择相邻层次上的上下层子元素(>指定上下层间的关系)

    (3)相邻兄弟选择器

  6)CSS3中选择器

 

  7)选择器的组合:多个选择器的组合。
    例:<style>

        .classA.classB{……}//中间没有空格,表示两个类选择器同时出现在某个元素的class属性中

        .classA .classB{……}//后代选择器

      </style>

CSS颜色:

  1)十六进制颜色:#RRGGBB(RR红色,GG绿色,BB蓝色)

  2)RGB颜色:RGB(红, 绿,蓝)。(每个参数在0-255或0%-100%之间)

  3)RGBA颜色:A即alpha,在0.0-1.0之间,表示透明的参数

  4)颜色名称

CSS超链接样式:

选择器描述
a:link 未被访问的链接
a:visited 已访问的链接
a:hover 鼠标指针位于链接上方
a:active 链接被点击时刻

其中text-decoration:none此声明表示该链接没有下划线。

例:a:link{color:black;font-size:10pt;text-decoration:none}

文本样式属性:

用于设置html中 文本显示的字体、大小、形态等

属性描述
color 设置文本颜色 颜色
direction 设置文本方向

 

letter-spacing 设置字符间距  
link-height 设置行高  
text-align 对其元素中的文本

center、justify(文本若有多行

,则两端对齐)、right

text-decoration

向文本添加修饰(向文本添加上

横线、删除线、下划线)

overline、underline、

line-through、none(默认值)

text-indent 缩进元素中文本的首行 长度取值
text-shadow 设置文本阴影  
text-transform 控制元素中的字母  
unicode-bidi 设置或返回文本是否被重写  
vertical-align 设置元素的垂直对齐  
white-space 设置元素中空白的处理方式  
word-spacing 设置字间距  

字体样式属性:

用于设置html页面中 文字显示的字体相关效果

属性描述
font 简写属性,一条属性设置所有属性值
font-family 指定字体名称

font-size

字体大小
font-wight 字体加粗
font-style 字体斜体
line-height 行高
font-variant 是否以小型大写字母的字体显示文本

背景样式属性:

定义html标签的背景效果。

样式属性 描述
background 简写属性,作用是将背景属性设置在一个声明中
background-attachment 背景图像是否固定或者随着页面的其余部分滚动
background-color 设置元素的背景颜色
background-image 把图像设置为背景
background-position 设置背景图像的起始位置
background-repeat 设置背景图像是否及如何重复

边框样式

  属性:border-[id1]-[id2]

    1)id1取值在top、left、right、bottom中,表明方向。

    2)id2取值在style、color、width中,分别表明边框样式、颜色、宽度。

    3)若两个参数都不存在,则表示简写属性,用于针对把四个边的属性设置在一个声明里。

    4)若id1不存在,则针对id2参数对所有边框的样式生效。

    5)若id2不存在,则把id1所表示的边框位置的所有属性设置在一个声明中。

    6)border-style属性取值:

取值 说明
dotted 点线边框
dashed 虚线边框
solid 实线边框
double 两个边框
groove 3D沟槽边框
ridge 3D脊边框
inset 3D嵌入边框
outset 3D突出边框

其他:

posted @ 2022-03-26 14:16  hred~  阅读(71)  评论(0)    收藏  举报