2021-10-25 CSS的基本使用

陌殇殇

已于 2024-07-02 14:59:28 修改

阅读量280

点赞数

分类专栏：前端文章标签： css css3 前端

于 2021-10-25 11:03:01 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_54158370/article/details/120947978

版权

前端专栏收录该内容

13 篇文章

订阅专栏

1.css样式表的三种使用方式

行内样式，写在标签的style属性上

内嵌样式，写在<head> 里，<style>

外部样式，需要创建单独的css文件，页面引用，使用最多的。 static 创建文件夹 css，下面创建xx.css文件

注意：属性冲突优先选用外部样式表，id不能纯数字

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*其他样式向下写*/
        b{ color: green;}
    </style>

    <!--应用外部样式表，href样式路径，rel="stylesheet"应用该样式-->
    <link rel="stylesheet" href="static/css/style.css">
</head>
<body>
    <!--样式表的三种书写位置：
        1.行内样式，写在标签的style属性上
        2.内嵌样式，写在<head> 里，<style>
        3.外部样式，需要创建单独的css文件，页面引用，使用最多的。
           3.1 static 创建 文件夹 css，下面创建xx.css文件
           代码整洁，修改文件，所有网页都变化
    -->

    <p style="color: red;">你好</p>

2.css样式表的常用选择器

1.普通选择器，按标签名来写

2.类选择器（点开头 + 名字），首先自己定义名称，标签都有class属性，来引用名字。自定义来选择那些标签采用样式

3.id选择器（#开头 + id名），所有标签都有id属性，先起id名，写对应的样式只能给一个标签使用，因为id不能重复

优先级： id > class > 普通

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*类样式定义，点开头 + 名字*/
        .my_p{
            color: red;
        }

        /*id选择器，#开头 + id名*/
        #p1{
            color: green;
        }

        p{
            color: yellow;
        }
    </style>

</head>
<body>
    <!--样式表选择器三种：
        1.普通选择器，按标签名来写
        2.类选择器，首先自己定义名称，标签都有class属性，来引用名字。
            自定义来选择那些标签采用样式
        3.id选择器，所有标签都有id属性，先起id名，写对应的样式
            只能给一个标签使用，因为id不能重复

        优先级： id > class > 普通
    -->

    <p class="my_p">测试文本</p>
    <p>测试文本</p>
    <p class="my_p">测试文本</p>
    <p>测试文本</p>
    <p id="p1" class="my_p">测试文本</p>
    <p>测试文本</p>
</body>

3.css样式表的常用属性

<span>行级，无任何效果的标签

<div> 块级，无任何效果的标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{color: yellow}
        p span{color: green}
        /*b下面所有span的第一个*/
        b span:nth-child(1){
            color: red;
        }

        #s1,#s2{
            color: blue;
        }

        span.m1{
            color: coral;
        }
    </style>

</head>
<body>
    <!--<span>行级，无任何效果的标签
        <div> 块级，无任何效果的标签
    -->

    <p>
        <span>test</span>
        <b>
            hello
            <span>world</span>
            <span id="s1">xxxxx</span>
            <span id="s2">xxxxx</span>
            <span class="m1">xxxxx</span>
            <p class="m1">xxxx</p>
        </b>
    </p>
</body>
</html>

3.1文本属性

font-size:字体大小

font-family:字体类型

font-style:字体样式

color:设置或检索文本的颜色

text-align:文本对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 属性冲突优先选用外部样式表-->
    <!--id不能纯数字-->
    <style>
        .my{
            color: red;
            font-family: 隶书;
            font-size: 28px;
            text-align: center;
        }
        #my001{
            color: hotpink;
            font-family: "Arial Unicode MS";
            font-size: 22px;
        }
        #my001,#my002{
            color: aqua;
        }
    </style>
    <link rel="stylesheet" href="../static/css/css001.css">
</head>
<body>
    <h2 class="my">静夜思</h2>
    <p class="my">床前明月光</p>
    <p class="my">疑是地上霜</p>
    <p>我是郭德纲</p>
    <p id="my001">低头思故乡</p>
    <p id="my002">低头思故乡</p>

</body>
</html>

3.2背景属性

background-color:设置背景颜色

background-image:设置背景图像

background-repeat:设置一个指定的图像如何被重复，可取值repeat-x、repeat、repeat-y，no-repeat

3.3边框属性、边界属性、填充属性

边框属性：border-style:设置边框的样式

border-width:设置边框的宽度

border-color:设置边框的颜色

边界属性: margin-top:设置对象的上边距

                margin-right:设置对象的右边距

                margin-bottom:设置对象的下边距

                margin-left:设置对象的左边距

填充属性: padding-top:设置内容与上边框之间的距离

                padding-right:设置内容与右边框之间的距离

                padding-bottom:设置内容与下边框之间的距离

                padding-left:设置内容与左边框之间的距离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div#d1{
            background-image: url(../static/images/img-1630322201766ca800624878f2ea90175bd9b80648541.jpg);
            color: white;
        }

        body{
            background-image: url(../static/images/a.jpg);
            /*默认 repeat*/
            background-repeat: repeat-x;
        }

        #boder{
            /*边框粗细*/
            /*border-width: 1px;*/
            /*边框样式*/
            /*border-style: solid;*/
            /*边框颜色*/
            /*border-color: red;*/

            border: 1px solid red;
            width: 100px;
            height: 100px;

            /*调间距，调儿子*/
            /*margin-top: 30px;
            margin-left: 50px;*/
            /*margin: 30px 50px;*/   /*上左*/
            margin: 10px 0 0 10px;      /*上右下左*/
        }

        #d2,#d3{
            width: 200px;
            height: 200px;
            border: 1px solid #000;
        }
        #d3{
            width: 50px;
            height: 50px;
        }
        #d2{
            /*填充是调父亲*/
            padding-left: 100px;
            /*处理填充后父亲变大*/
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div id="d1">1111</div>
    <div id="boder">boder</div>
    <div id="d2">
        <div id="d3"></div>
    </div>
</body>
</html>

3.4特殊样式：超链接

a:link 未被访问的链接

a:visited 已被访问过得链接

a:hover 鼠标悬浮在上的链接

a:active 鼠标点中激活链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a：link{
            color: red;
        }
        #a2:link{
            color: #2aabd2;
        }
        .a1:hover{
            color: #e4b9c0;
        }
        #a2:visited{
            color: #3e8f3e;
        }
    </style>
</head>
<body>

<a class="a1" href="#">001</a>
<a id="a2" href="#">002</a>
<a href="#">003</a>

</body>
</html>