CSS样式

CSS样式

1. CSS概念

CSS是Cascading Style Sheets 的缩写，中文的意思是层叠样式表或级联样式表。

2. CSS设置方式

2.1 内联模式

举例：

<body>
    <h1 style="font-family:宋体;font-size:12pt;color:blue">在这里使用了H1标记</h1>
</body>

特点：

灵活，简单方便

2.2 嵌入样式

举例:

<head>
    <style type = "text/css">
        h1{
            font-family:字体;font-size:大小px;color:颜色
        }
    </style>
</head>
<body>
    <h1>
        这里用了h1标记
    </h1>
</body>

特点：

一个样式可以在一个页面多次应用

2.3 外部样式

外部样式需要新建一个.css文件，将具体样式写进.css文件中，通过link调用

举例（.css文件中）：

h1{
    font-family:字体;font-size:大小px;color:颜色
}

举例（.jsp文件中）：

<head>
    <link rel = "stylesheet" href = ".css文件路径" type = "text/css">
</head>
<body>
    <h1>
        这里使用了h1标记
    </h1>
</body>

特点：可以为多个网页所共同引用，即减少代码，又可以做到统一页面风格。

3. CSS语法格式

3.1 CSS语法基本格式

selector {property : value}

选择符 {属性 ：值 }

Tip：

  1. 当属性的值是多个单词组成时，必须在值上加双引号

例如：

h1 {
    font-family:"Courier New"
}

  1. 如果需要对一个选择符指定多个属性时，使用分号隔开

h1  {
    font-size:15;
    color:red
}

3.2 选择符

3.2.1 html选择符

html选择符就是以html标签作为选择符

h1{
    font-size:大小;
    color:颜色
}
h2{
    font-size:大小;
    color:颜色
}

作用域：所有符合条件的html标签

3.2.2 class选择符

使用html标签的class属性设置值的作为选择符的就是class选择符

独立的class selector：可以为多个不同的html标签定义相同的样式：

<style type = "text/css">
    .title{
            text-align:center;color:red    
    }
</style>
<h1 class = "title"></h1>
<h2 class = "title"></h2>

关联的class selector：可以为同一个html标签定义不同的样式：

h1.stop{
    color:red
}
h1.warning{
    color:yellow
}
h1.normal{
    color:green
}
<h1 class = "stop">     这是stop样式    </h1>
<h1 class = "warning">  这是warning样式 </h1>
<h1 class = "normal">   这是normal样式  </h1>

3.2.3 ID选择符

ID属性用来定义某一特定HTML标签，一个网页文件只能有一个标签使用某一ID属性值，ID Selector就是用来设置这样具有ID属性HTML标签的样式。

<style type = "text/css">
    #title{
            text-align:center;
            color:bule
    }
</style>
<div id = "title">
    YAYAYA
</div>

3.2.4 包含选择符

是指用空格隔开的两个或多个单一选择符组成的字符串

<html>
<head>
    <style type="text/css">
        table a{color:green;text-decoration : none; }
    </style>
</head>
<body>
    <a href="http://www.nou.com.cn">东软教育在线</a>/*不会受table a影响*/
    <table border=1>
        <tr><td><a href="http://www.nou.com.cn">东软教育在线</a></td></tr>
    </table>
</body>
</html>　　　　　

Tip：包含选择符的优先权要比单一选择符定义的样式规则的优先权要高

定义

table a{
        color:green;text-decoration : none
}

同时定义

a{
    color:yellow
}

结果：表格中的文本为绿色，即执行包含选择符的样式规则

3.2.5 组合选择符

为了减少样式表的重复声明可以在一条样式规则定义语句中组合若干个选择符，每个选择符之间用逗号隔开

h1{
    color:#CC66FF;
}
h2{
    color:#CC66FF;
}
h3{
    color:#CC66FF;
}

可以写成

h1,h2,h3{
    color:#CC66FF;
}

3.2.6 伪元素选择符

指同一个html元素的各种状态和部分内容的一种定义方式

格式：html选择符:伪元素{ 属性 : 值}

例如超链接标签（<a>）的正常状态（没有做任何动作前）、访问过的状态、选中的状态、光标移到超链接上的文本状态，还有段落的首字母和首行都可以用伪元素选择符来定义样式

  • a:active　表示超链接选中的状态

  • a:hover　表示鼠标移动到超链接上的状态

  • a:link　表示超链接的正常状态

  • a:visited　访问过的超链接的状态

3.3 注释、继承、优先级

3.3.1 注释

/*
    注释内容
*/

Tip：注释不能嵌套

3.3.2 继承

所有嵌套在某个HTML标签中的HTM标签都会自动继承外层标签设置的样式规则

3.3.3 优先级

  1. id选择器

  2. class选择器

  3. html标签选择器

  4. 内联样式表

  5. 嵌入样式表

  6. 外部样式表

  7.  

 

 

 

posted @ 2021-10-12 17:12  KumYa  阅读(243)  评论(0)    收藏  举报