Web应用课 第二讲 CSS定义方式、选择器、颜色

定义方式

行内样式表：只作用在单个元素

    <!--CSS定义方式1：行内样式表-->
    <img src="/static/images/mountain.jpg" alt="山1" width="300">
    <img src="/static/images/mountain.jpg" alt="山2" style="width: 30%;">
    <!--二者效果相同-->

内部样式表：在单个页面内定义，作用域为整个页面

内部样式表一般定义在head域内，也可定义在body域内

<style type="text/css"> 

    /* 设置页面中所有图片的样式 */
        img{  
            width: 300px;
            height: 200px;
            border-radius: 10%;
        }
    
    /* 设置页面中所有段落的样式 */
        p{
            width: 50px;
            height: 50px;
            background-color: lightseagreen;
        }
    /* 设置页面中所有class为blue-p的样式，注意类名前有. */
        .blue-p{
            background-color:lightblue;
        }
    
    /* 设置页面中所有class为big的样式，注意类名前有. */
        .big{
            height: 70px;
            width: 70px;
        }
    </style>

外部样式表：定义在页面外的单个css文件中，作用域为多个页面

在页面中使用link来应用外部样式表

<link rel="stylesheet" href="/static/css/style1.css" type="text/css">
<link> 标签常用的 MIME 类型是 "text/css"，它规定样式表。
type 属性规定被链接文档/资源的 MIME 类型。只有当设置了 href 属性时，才能使用该属性。

注释

CSS只有多行注释

/*我是注释*/

选择器

标签选择器：选择所有标签

div{
    width: 100px;
    height: 100px;
    background-color: aquamarine;
    margin-bottom: 10px; /*外边距*/
}

p{
    width: 50px;
    height: 70px;
    background-color: lightblue;
}

ID选择器：选择对应ID的标签

外部css文件

#mydiv{
    background-color: coral;
}

#myp{
    background-color: blueviolet;
}

页面文件

<div id="mydiv">div 3</div>

类选择器：选择对应class的标签

外部CSS文件

/* 类选择器 */
.red-tag{
    background-color: brown;
}
.blue-tag{
    background-color: lightblue;
}
.big-tag{
    width: 120px;
    height: 120px;
}

页面文件

<p class="big-tag">p 4</p>
<div class="red-tag blue-tag">div 4</div>

伪类选择器：用于定义元素的特殊状态

链接伪类选择器

• :link：链接访问前的样式
• :visited：链接访问后的样式
• :active：鼠标点击长按时的样式
• :focus：聚焦后的样式

a:link{
    color: red;
}

a:visited{
    color:green;
}

a:hover{
    color:orange;
}

a:active{
    color:purple;
}

• :hover：鼠标悬停时的样式

.effect:hover{
    transform: scale(1.2);
    transition: 200ms;
}
/* 鼠标悬停，标签在200ms内逐渐变大1.2倍 */

位置伪类选择器

• :nth-child(n)：选择是其父标签第n个子元素的所有元素。

括号内接受an+b的形式，a代表一个循环的大小，n是一个计数器（从0开始），以及b是偏移量。
判断逻辑：若存在自然数n满足标签编号为an+b，则选中该标签

目标伪类选择器

• :target：当url指向该元素时生效。

p:target{
    transform: scale(1.2);
    color:orange;
    transition: 1000ms;
}
/*通过链接访问时变色为橙色，同时在1s内变大1.2倍

<a href="#myp">about</a>
<p id="myp">p 3</p>

复合选择器：由两个及以上基础选择器组合而成的选择器

• element1, element2：同时选择元素element1和元素element2。

p,div{
    width: 50px;
    height: 70px;
    background-color: greenyellow;
}

• element.class：选则包含某类的element元素。

div.big{
    transform: scale(1.2);
}

• element1 + element2：选择紧跟element1的element2元素。

p + div{
    background-color: blueviolet;
}
//作用在紧跟在p后面的div

• element1 element2：选择element1内的所有element2元素。

ul ul{
    color:gold;
}
//选择ul内的ul元素

    <ul>
        <li>1
            <ul>
                <li>1.1</li>
                <li>1.2</li>
                <li>1.3</li>
            </ul>
        </li>
        <li>2</li>
        <li>3</li>
    </ul>

• element1 > element2：选择父标签是element1的所有element2元素。

通配符选择器

• ：选择所有标签

[attribute]：选择具有某个属性的所有标签

input[required]{
    background-color:red;
}
/*选择属性为required的input标签*/

[attribute=value]：选择attribute值为value的所有标签

input[type=text]{
    background-color: aqua;
}
/*选择type属性为text的input标签*/

伪元素标签

将特定内容当做一个元素，选择这些元素的选择器被称为伪元素选择器。
::first-letter：选择第一个字母

p::first-letter{
    color: red;
    font-size: 110%;
}
/*选择每段第一个字符*/

::first-line：选择第一行

p::first-line{
    color: red;
    font-size: 110%;
}

::selection：选择已被选中的内容

p::selection{
    background-color: aquamarine;
    color:yellow;
}

::after：可以在元素后插入内容
::before：可以在元素前插入内容

h1::before{
    content: "《";
}
h1::after{
    content:"》";
}
/*给h1标题加上书名号*/

样式优先级

• 权重大小，越具体的选择器权重越大：!important > 行内样式 > ID选择器 > 类与伪类选择器 > 标签选择器 > 通用选择器
• 权重相同时，后面的样式会覆盖前面的样式
• 继承自父元素的权重最低