css基础1

时间 2019-12-12

标签 css 基础栏目 CSS 繁體版

原文原文链接

今天是2019年6月15日周六，老师给咱们讲了css的第一节课：css基础部分，写个随笔留个印记！css

1、css的概念html

css：cascading style sheet 中午翻译过来就是层叠样式表，它主要是用于定义HTML的内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等浏览器

优点：一、实现了内容与表现的分离布局

　　　二、提升了代码的可维护性字体

使用场景：能用css取代Html属性就要用到css，有些属性没法取代：如input属性的 type ，img属性的alt。spa

2、css的三种引入方式翻译

一、行内样式（内联样式）code

语法：新增标签的style属性在style属性的值中写csshtm

格式：css属性1：属性值1；css属性2：属性值2；blog

特色：01，没有实现内容如表现的分离，只针对当前标签有效。

　　　02，优先级别最高

使用场景：经过js动态给一些元素加样式

<body>
    <div style="width:100px;height:100px;background:red;">
    </div>          
</body>

二、内部样式表

语法：在头部新增style标签，在style标签的内容中写css。

选择器：规定了页面上哪些元素可使用定义好的css

格式：选择器 {

　　　　css属性：属性值；

　　　}

特色：01，没有实现内容与表现的分离

　　 02，有必定的可重用性和可维护性

使用场景：没有使用场景

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>内部样式表</title>
        <style>
            div {
                width: 200px;
                height: 200px;
                background: red;
            }
        </style>
    </head>
    <body>
        <div id="box">我是div</div>
    </body>
</html>

三、外部样式表

语法：新建外部以.css结尾的文件，将全部的css代码写在外部的文件中，在须要使用的Html中经过link引入。

格式：<link rel="stylesheet" href="css路径">　

注释：html注释 　　css注释 /*css注释*/

html部分：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>外部样式表</title>
        <link rel="stylesheet" href="css/common.css">
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <div class="box"></div>
    </body>
</html>

css部分：

.box {
    width: 299px;
    height: 200px;
    background: pink;
}

3、css样式表的特征

一、继承性：大多数css属性是能够被继承的，例如字体、文本相关样式能够被继承；宽度、高度、边框、背景等等不能继承。因为标签嵌套出现父子关系、祖前后代关系（包括父子关系）也能够被继承。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>继承性</title>
        <style>
            div {
                color: purple;
            }
        </style>
    </head>
    <body>
        <div>
            我是div文本内容
            <p>我是p文本内容</p>
        </div>
    </body>
</html>

二、层叠性：若是代码多处都找到同一个标签，设置了不少样式，在不冲突的状况下，这些样式会层叠为一个，共同做用到标签上。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>层叠性</title>
        <style>
            div {
                width: 400px;
                height: 400px;
                background: pink;
            }
        </style>
    </head>
    <body>
        <div style="width: 300px"></div>
    </body>
</html>

三、优先级别：

01，浏览器缺省设置：user agent stylesheet （优先级别最低）

02，内部样式表和外部样式表优先级别同样，采起就近原则，谁在下以谁为准。

03，内联优先级别最高

04，！important手动提升优先级别，写在须要提升优先级css属性的后面以空格分割，需谨慎使用。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>important</title>
        <style>
            div {
                width: 400px !important;
                height: 400px;
                background: orange;
            }
        </style>
                <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div style="width: 800px"></div>
    </body>
</html>

4、css选择器

概念：规定了页面上哪些元素可使用定义好的样式

一、通配符：通用选择器

语法：* {

　　　　　　css代码

　　}

功能：匹配页面上全部的元素

注意：要谨慎使用，效率比较低。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>通配符</title>
        <style>
            * {
                color: orange;
            }
        </style>
    </head>
    <body>
        <div>我是div</div>
        <p>我是p段落</p>
        <span>我是span标签</span>
    </body>
</html>

二、标签选择器（元素选择器）

语法：将标签名做为选择器

使用场景：通常用于定义标签的默认样式，或者去除标签默认样式，使用场景不多。在Html、css中如Html,body,p,h1-h6,ul,li,ol这些元素都带有默认的外边距和内边距。

三、类选择器

语法：.class值 {

　　　　　　css代码

}

属性：class属性的功能就是将标签分类，注意不是以标签名分类。

class属性的值命名规范：由字母数字下划线分隔符组成，尽可能不要使用拼音，英文名应见名知意。注意：当这个类由多个单词组成，中间使用下划线或分隔符隔开。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>类选择器</title>
        <style>
            .zhy {
                width: 300px;
                height: 300px;
                background: pink;
            }
            .zy {
                width: 400px;
                height: 400px;
                background: blue;
            }
            .zjx {
                width: 500px;
                height: 500px;
                background: orange;
            }
        </style>
    </head>
    <body>
        <div class="zhy">我是zhy</div>
        <div class="zy">我是zy</div>
        <div class="zjx">我是zjx</div>
    </body>
</html>

四、分类选择器

语法：将标签选择器和类选择器结合起来使用，从而实现对于一些元素不一样属性精肯定义。

格式：标签选择器.class值 {

　　　　　　css代码

}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>分类选择器</title>
        <style>
            .box {
                width: 200px;
                height: 200px;
                background: orange;
            }
            p.zhy {
                color: red;
            }
        </style>
    </head>
    <body>
        <div class="box">div标签</div>
        <p class="zhy">p标签</p>
    </body>
</html>

五、多类选择器

定义：class属性能够定义多个值，多个值之间以空格分割。

含义：一个标签具备class属性且值为多个。

使用场景：用于提高选择器的优先级

格式：.属性值1.属性值2.属性值3 {

　　　　　　css样式

}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>分类选择器</title>
        <style>
            .box {
                width: 200px;
                height: 200px;
                background: orange;
                margin-top: 10px;
            }
            .zy {
                color: black;
            }
            .zhy {
                color: red;
            }
            .zjx {
                color: purple;
            }
            .box.zjx.zxm {
                font-size: 25px;
            }
        </style>
    </head>
    <body>
        <div class="box zy">div1</div>
        <div class="box zhy">div2</div>
        <div class="box zjx zxm">div3</div>
    </body>
</html>

六、id选择器

定义：给一个标签设置一个id属性，经过选择id属性的值来选择这个标签。

注意：一个id属性只能有一个值，不能和其余标签的id属性重复。id属性是一个标签独一无二的身份证实。

语法：#id值 {

　　　　css代码

}

使用场景：在静态页布局中用于最外层的盒子

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>id选择器</title>
        <style>
            #box {
                width: 200px;
                height: 200px;
                background: orange;
            }
        </style>
    </head>
    <body>
        <div id="box">我是div</div>
    </body>
</html>

七、群组选择器

功能：定义多个选择器的公共样式

语法：选择器1，选择器2，选择器3...选择器 {

　　　　　　　　css样式

}

八、子代选择器：因为标签的嵌套，标签之间会产生两种关系：父子关系和祖前后代（包含父子）的关系。

格式：选择器1>选择器2

注意：选择器1和选择器2之间的关系是父子的关系，最终选中的是选择器2。

九、后代选择器

格式：选择器1 选择器2

注意：选择器1和选择器2之间的关系是祖前后代关系，最终选中的是选择器2。

备注：祖前后代是包含子代的。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>子后代选择器</title>
        <style>
            #box>div {
                color: red;
            }
            #box div {
                color: blue;
            }
            #box .zhy {
                color: orange;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <div class="zhy">
                子代div标签
                <div>
                    后代div标签
                    <span>我是
                        <a href="#">a标签</a>
                    </span>
                </div>
            </div>
        </div>
    </body>

</html>

十、伪类选择器：正常状况下选择的是元素，伪类选择器选中的是选中的一种状态。

动态伪类：一、hover：匹配元素鼠标移入时的状态

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>hover</title>
        <style>
            #box { 
                width: 200px;
                height: 200px;
                background: orange;
            }
            #box:hover {
                width: 300px;
                height: 300px;
                background: purple;
            }
        </style>
    </head>
    <body>
        <div id="box" class="zhy"></div>
    </body>
</html>

二、focus：获取焦点时的状态，匹配的是表单控件。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>focus</title>
        <style>
            input:focus {
                width: 400px;
            }
        </style>
    </head>
    <body>
        <input type="text">
    </body>
</html>

三、active：匹配元素激活时的状态，通常用于a标签。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>active</title>
        <style>
            a:active {
                color: green;
            }

            a:link {
                color: red;
            }

            a:visited {
                color: pink;
            }
    </style>
    </head>
    <body>
        <a href="#">我是超连接</a>
    </body>
</html>

连接伪类：一、link：访问前的状态

　　　　　二、visited：访问后的状态

未完，待续！