css引入方式与选择器

css引入方式

08-css引入方式一_行内

行内样式:
- 在HTML标签中添加属性
- 作用域最小,作用当前标签; 行内样式的优先级最高

<body>
    <h3 style="color: red;">h3标签</h3>
    <h3>哈哈</h3>
</body>

css引入方式二_内部

内部样式:
- 在HTML页面里面写CSS代码, 一般写在<head>中, 使用标签 style , 属性: type="text/css"
- 作用是当前整个页面有效

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            h3{color: chocolate;}
        </style>
    </head>
    <body>
        <h3>h3标签</h3>
        <h3>哈哈</h3>
    </body>
</html>

css引入方式三_外部

外部样式:
- CSS样式定义在另一个文件中,后缀名.css (文本文件)
- 在HTML页面中,引入样式表, 使用link标签写在head中
  - 属性: href="css文件路径" | type="text/css" | rel="引入的文件和当前页面是什么关系"
- 作用范围最大,哪个页面引入,哪个有效

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link href="css/1.css"  type="text/css" rel="stylesheet"/>
    </head>
    <body>
        <h3>h3标签</h3>
        <h3>哈哈</h3>
    </body>
</html>

css/1.css

h3{
    color: blue;
}

css选择器

11-css基本选择器

选择器就是对HTML标签设置样式作用

标签元素选择器用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下：标签名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
ID选择器 id选择器使用“#”进行标识，后面紧跟id名. 其基本语法格式如下：#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 需要在html标签上,添加属性id="选择器名", 配合ID选择器进行使用
==类选择器== 类选择器使用“.”（英文点号）进行标识，后面紧跟类名其基本语法格式如下：.类名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 需要在html标签上,添加属性class="选择器名", 配合class选择器进行使用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /*标签元素选择器,选择器名字和标签名相同*/
            h1{
                color: red;
            }
            /*ID选择器*/
            #one{
                color: blue;
            }
            /*class选择器*/
            .two{
                color: yellow;
            }
        </style>
    </head>
    <body>
        <h1>123</h1>
        <h1>456</h1>       
        <h2 id="one">789</h2> 
        <h2 class="two">789</h2>
    </body>
</html>

css属性选择器

属性选择器，在标签后面使用中括号标记

其基本语法格式如下：标签名[标签属性=’标签属性值’] {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            input[type="text"]{
                color: red;
            }
            
            input[type="password"]{
                background-color: green;
            }
        </style>
    </head>
    <body>
        用户名<input type="text" /><br />
        密　码<input type="password" />
    </body>
</html>

css包含选择器

包含选择器，两个标签之间使用空格，给指定父标签的后代标签设置样式，可以方便在区域内编写样式。

其基本语法格式如下：父标签后代标签{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div span{
                color: red;
            }
        </style>
    </head>
    <body>
        <div>哈哈</div>
        <div>
            <span>div中的span</span>
        </div>
        <span>就是span</span>
    </body>
</html>

css伪元素选择器

CSS 伪元素用于将特殊的效果添加到某些选择器。例如: 超链接的不同状态都可以指定不同的效果.

四个状态: 没点过,点过,鼠标悬浮,激活

样式: 固定顺序 l-v-h-a

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            a:link{color: #333333; text-decoration: none;}/*没点过*/
            a:visited{color: #333333;text-decoration: none;}/*点过*/
            a:hover{color: red;text-decoration: none;}/*鼠标悬浮*/
            a:active{color: green;text-decoration: none;}/*激活*/
        </style>
    </head>
    <body>
        <a href="http://www.itheima.com">黑马</a>
        <a href="http://www.baidu.com">百度</a>
    </body>
</html>