2.1 CSS技术
1.简介:它是叠层样式表,cascading stytle sheet ,它的作用是增强网页的显示效果。
目的:使用css让网页内容和样式分离,便于网站代码后期的维护。
书写规范: 选择器{属性1:值1;属性2:值2;} 提示:如果值为若干单词,则要给值加引号
实例:通过css样式<div>标记进行设置
div{border:1px solid red;width:600px;height:400px;}
其中div为选择器,表示css样式作用的HTML对象。Border属性有三个值“1px solid red”
分为表示1像素、实心边框线、红色。
CSS样式的引入方式
注意:css不能单独使用,必须和html网页配合使用,引入css的四种方式:链入式、内嵌式、行内式、导入式。(内嵌式和链入式比较常用)
如果是比较小范围的使用CSS,或者单个页面使用,内嵌式比较方便;如果是大网站为了方便维护和管理,就要使用链入式。

  1. 行内式:直接在html标记里面使用css样式
    语法:<div style="background-color: red">div的行内式效果</div>
  2. 内嵌式:
    (1)语法:<style type="text/css">
    css代码
    </style>
    *注意:代码的位置一定要放在<head>标记里面。
    例如:<html>
    <head>
    <meta charset="utf-8">
    <title>css样式的引入方式</title>
    <style type="text/css">
    h2 {text-align:center;}
    div{
    border:1px solid red;
    width:300px;
    height:200px;
    color:bule;
    }
    </style>
    </head>
    <body>
    <!--演示 行内式-->
    <div style="background-color: red">div的行内式效果</div>
    <!--演示内嵌式-->
    <h2>内嵌式css样式</h2>
    <div>使用style标记来实现内嵌式的效果,它的位置要放在<head>标记里面,title的后面
    </body>
    </html>
    3.链入式:
    语法:<link type=’’text/css’’ href=’’外部css文件的名称/路径’’ rel=”stylesheet”><link>
    步骤:
    (2)创建一个css文件
    div {
    background-color:red ;
    }

(3)在网页里面使用link标签来引入外部的css文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link type="text/css" href="链入式.css" rel="stylesheet"</link>
</head>
<body>
<div>链入式实现的效果</div>
</body>
</html>
4.导入式:
(4)语法:<style type=’’text/css’’>br/>@import(“外部css的url”)
</style>
2.2 CSS选择器和常用的属性
1.标记选择器:直接使用html标记作为选择器
比如:<div>标记选择器</div>
语法:div{属性:值;}

  1. 类选择器:直接使用HTML标记的class属性的值作为选择器
    比如:<div class=”divclass”>class选择器</div>
    语法:.divClass {属性:值;}
  2. ID选择器:直接使用html标记的ID属性的值作为选择器
    比如:<div id=”divId”>id选择器</div> 比如都写在body的里面、
    语法:#divId {属性:值;} 语法都写在head里面。Title的后面。
    id属性的值必须唯一
  3. 通配符选择器:让所有的标记显示相同的样式。
    语法: *{属性:值;}
    选择器之间的优先级:id选择器>类选择器>标记选择器>通配符选择器
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>css选择器</title>
    <style type='text/css'>
    /标签选择器:标签+{};在此设置的标签属性,浏览器打开此页面时,选择所有此标签进行属性设置/
    div {background-color:red;}
    /类选择器:.+类名+{};在此设置的类属性,浏览器打开此页面时,选择所有此类进行属性设置,优先级高于标签选择器/
    .divClass {background-color:purple;}
    /id选择器:#+id名+{};在此设置的id属性,浏览器打开此页面时,选择此id进行属性设置,优先级高于类选择器和标签选择器/
    #divId {background-color:green;}
    </style>
    </head>
    <body>
    <div>标记选择器</div>
    <div class="divClass">测试--选择器</div>
    <div class="divClass">标记选择器</div>
    <div id="divId">标记选择器</div>
    <!-- 选择器之间的优先级:id选择器>class选择器>标记选择器>通配符选择器-->
    </body>
    </html>