浅学 --------- CSS

最新推荐文章于 2024-09-29 21:43:16 发布

CKL0g1c

最新推荐文章于 2024-09-29 21:43:16 发布

阅读量252

点赞数

分类专栏： web 0-1 文章标签： css html css3

本文链接：https://blog.csdn.net/ckk1314520/article/details/125317420

版权

web 0-1 专栏收录该内容

24 篇文章 2 订阅

订阅专栏

htCSS简介

什么是CSS？

1、CSS 指层叠样式表 (Cascading Style Sheets)

2、样式定义如何显示 HTML 元素

3、样式通常存储在样式表中

4、外部样式表可以极大提高工作效率

5、外部样式表通常存储在 CSS 文件中

6、多个样式定义可层叠为一个

样式解决了一个很大的问题

HTML 标签原本被设计为用于定义文档内容，如下实例：

<h1>这是一个标题</h1>
<p>这是一个段落</p>

样式表定义如何显示 HTML 元素，就像 HTML 中的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观。

CSS语法

在这里插入图片描述

CSS实例

CSS声明总是以分号 ; 结束，声明总以大括号 {} 括起来

p {color:red;text-align:center;}

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {color: red; text-align: center;}
    </style>
</head>
<body>
    <p>hello world!</p>
    <p>加油！WEB安全</p>
</body>
</html>

CSS注释：以/*开始，以*/结束

CSS Id 和 Class

id 和 class 选择器

如果要在HTML元素中设置CSS样式，需要在元素中设置"id" 和 "class"选择器。

id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式

HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以 “#” 来定义

例子：以下的样式规则应用于元素属性 id = “para1”：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #para1 {color: red; text-align: center;}
    </style>
</head>
<body>
    <div id="para1">hello world!</div>
    <p>加油！WEB安全</p>
</body>
</html>

注意：ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

class 选择器

class 选择器用于描述一组元素的样式，class 选择器有别于 id 选择器，class 可以在多个元素中使用。

class 选择器在 HTML 中以class属性表示，在 CSS 中，类选择器以一个点 “.” 显示

以下例子中，所有拥有 center 类的 HTML 元素均为居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .center {color: red; text-align: center;}
    </style>
</head>
<body>
    <div class="center">hello world!</div>
    <div class="center">加油！WEB安全</div>
</body>
</html>

也可以指定特定的HTML元素使用class。

在以下实例中, 所有的 p 元素使用 class=“center” 让该元素的文本居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p.center {color: red; text-align: center;}
    </style>
</head>
<body>
    <p class="center">hello world!</p>
    <h1 class="center">加油！WEB安全</h1>
</body>
</html>

类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

CSS 创建

三种方式：

1、页内样式：放在head之间，用style标记

2、行内样式：放在标记的style属性里，行内样式优先级最高

3、外部样式：放在独立的 .css 文件中，在网页上用 link 标记引入

一般常用于外部样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS代码放的位置</title>
    <!--引入外部CSS文件-->
    <link rel="stylesheet" href="test.css">
    <style>
        div{
            color: red;
        }

    </style>
</head>
<body>
    <h1>CSS代码位置1(页内样式)：放在head之间，用style标记</h1>
    <div>hello world!</div>

    <h1>CSS代码位置2(行内样式)：放在标记的style属性里 </h1>
    <p style="color: green; font-size:20px">真实的故事</p>

    <h3>CSS代码位置3(外部样式)：放在单独的CSS文件中</h3>
    <input type="text" id="uname">
</body>
</html>

#uname{
    width: 300px;
    height: 50px;
}

CSS Backgrounds(背景)

背景（颜色background-color）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景样式</title>
    <style>
        #subBtn{
            color: white;
            background-color: orange;
            width: 134px;
            height: 31px;
        }

        #mydiv{
            background-color: blue;
            width: 400px;
            height: 400px;
        }
    </style>
</head>
<body>
    <div id="mydiv"></div>
    <input  type="submit" id="subBtn" value="下一步">
</body>
</html>

CSS Text(文本)

文本样式（ color \ text-align \ text-decoration ）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本样式</title>
    <style>
        .nuc{
            color: red;
            text-align: center;
            text-decoration: underline;
        }

        #my{
            text-decoration: line-through;
        }

        a{
            text-decoration: none;
        }
    </style>
</head>
<body>
    <p class="nuc">hello world</p>
    <p id="my">XXX的录取offer</p>
    <a href="">太原市科技局</a>
</body>
</html>

CSS Fonts(字体)

字体样式（font-family \ font-size）

网页上的文字默认是16px；在工程上，网页上的文字一般是12px或14px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体样式</title>
    <style>
        .myflag{
            font-family: "仿宋";
            font-size: 40px;
        }
    </style>
</head>
<body>
    <p class="myflag">这是一个段落</p>
</body>
</html>

CSS 链接(link)

链接样式(a:hover)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超链接样式</title>
    <style>
        a {
            text-decoration: none;
        }
        a:hover{
            color: red;
            font-size: 50px;
        }

        p {
            text-align: center;
        }
    </style>
</head>
<body>
    <p>
        <a href="http://www.baidu.com">百度官网</a>
    </p>    
</body>
</html>

CSS Table(表格)

表格样式（细线表格 border-collapse：collapse）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格样式</title>
    <style>
        table {
            width: 500px;
            height: 80px;
            text-align: center  ;
        }
        /*给table，tr，td 同时施加样式*/
        table,tr,td {
            /*边框宽度1px、实线、黑色*/
            border: 1px solid black;
        }

        table {
            /*边框折叠起来，不要有空心*/
            border-collapse: collapse;
        }

        a {
            text-decoration: none;
        }

        a:hover{
            color: red;
        }
    </style>
</head>
<body>
    <table align="center" border="1">
        <tr>
            <td>学号</td>
            <td>姓名</td>
            <td>籍贯</td>
            <td>操作</td>
        </tr>

        <tr>
            <td>040846</td>
            <td>王龙</td>
            <td>山西</td>
            <td>
                <a href="#">修改</a> &nbsp; &nbsp; &nbsp;
                <a href="#">删除</a> 

            </td>
        </tr>   

        <tr>
            <td>040846</td>
            <td>王龙</td>
            <td>山西</td>
            <td>修改 删除</td>
        </tr>    

        <tr>
            <td>040846</td>
            <td>王龙</td>
            <td>山西</td>
            <td>修改 删除</td>
        </tr> 
   
    </table>
</body>
</html>

CSS border(边框)

border-radius 边框四个角带弧度

边框变红 border：1px solid red

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>边框样式</title>
    <style>
        #uname {
            border: 1px solid red;
            width: 220px;
            height: 35px;
            /*边框四个角带弧度*/
            border-radius: 5px;
        }

        #mydiv {
            border: 1px solid blue;
            width: 500px;
            height: 500px;
        }
    </style>
</head>
<body>
    用户名<input type="text" id="uname"><br>
    <div id="mydiv">这是小学期实训</div>
</body>
</html>

CSS盒子模型

1、与网页布局密切相关

2、美工必须精通

3、开发工程师理解并会用

4、重要：外边距 margin、内边距padding；内外边距是相对的，看站在哪一方面来说。边距有4个方向：上下左右

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS盒子模型</title>
    <style>
        #firstDiv {
            width: 480px;
            height: 480px;
            border: 1px solid red;
            padding-top: 30px;
            padding-left: 50px;
            margin: 0 auto;   /*让Div居中*/
        }

        #secondDiv {
            width: 260px;
            height: 260px;
            border: 5px solid cyan;
            padding-top: 30px;
        }

        #loginBtn {
            margin-top: 30px;
            margin-left: 20px;
        }
    </style>
</head>
<body>
    <div id="firstDiv">
        <div id="secondDiv">
            <button id="loginBtn">登录按钮</button>

        </div>
    </div>
</body>
</html>

登录网页

1、用到了盒子模型（内部外部边距等）

2、HTML 表单元素（用户名、密码、登录按钮）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>教务系统登录</title>
    <style>
        body {
            background-color: #1e9fff;
        }

        #loginDiv{
            background-color: white;
            width: 480px;
            height: 390px;
            margin: 0 auto;
            color: #1e9fff;
            margin-top: 150px;
            text-align: center;
            padding-top: 20px;
        }

        #uname {
            width: 400px;
            height: 35px;
            border-radius: 5px;
            border: 1px solid lightgray;
            margin-left: -30px;
            background-color: transparent;
            padding-left: 30px;
        }

        #upsw {
            width: 400px;
            height: 35px;
            border-radius: 5px;
            border: 1px solid lightgray;
            margin-left: -30px;
            background-color: transparent;
            padding-left: 30px;
            margin-top: 18px;
        }

        #loginBtn{
            width: 430px;
            height: 35px;
            margin-top: 11px;
            background-color: #1e9fff;
            border: 1px solid #1e9fff;
            border-radius: 5px;
            color: white;
        }
    </style>
</head>
<body>
    <div id="loginDiv">
        <h1>UOLab联合开发实验室管理平台</h1>
        <img src="images/usr.png">
        <input type="text" id="uname" name="username">
        <br>
        <img src="images/password.png">
        <input type="password" id="upsw" name="userpsw">
        <br>
        <button id="loginBtn">登录</button>
    </div>
</body>
</html>

CSS显示

1、dispaly

2、visibility

面试题：上面的两个有何区别？

dispaly：隐藏后，释放区域

visibility：隐藏了，但区域还在，不释放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS显示与隐藏</title>
    <style>
        .picDiv { 
           /* display: none;*/  /*不显示、隐藏*/
            visibility: hidden;
        }
    </style>
</head>
<body>
    <h1>Hello</h1>
    <div class="picDiv">
        <img src="D:/桌面/图片/canvas4.png" width="500px" height="500px">
    </div>
    <h1>World</h1>
</body>
</html>

CSS浮动(float)

主要用于：网页布局（ CSS + DIV ）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS浮动</title>
    <style>
        #firstDiv {
            width: 300px;
            height: 80px;
            background-color: yellow;
            float: left;    /*让第一个div浮动起来，脱离流*/
        }

        #secondDiv {
            width: 410px;
            height: 80px;
            background-color: blue;
            float: left;
        }

        #thirdDiv {
            width: 230px;
            height: 100px;
            background-color: red;
            float: left;
        }

        #fourthDiv {
            width: 290px;
            height: 80px;
            background-color: darkgreen;
        }
    </style>
</head>
<body>
    <div id="firstDiv">这是1个div</div>    
    <div id="secondDiv">这是2个div</div>    
    <div id="thirdDiv">这是3个div</div>    
    <div id="fourthDiv">这是4个div</div>    
</body>
</html>

CSS + DIV做网页布局离不开浮动，看网页效果，返回来理解用意

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理系统布局示意-CSS+DIV</title>
    <style>
        #topDiv {
            height: 40px;
            width: 100%;
            background-color: blue;
        }

        #leftDiv {
            width: 120px;
            height: 360px;
            background-color: yellow;
            float: left;
        }

        #rightDiv {
            width: 100%;
            height: 360px;
            background-color: deepskyblue;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="topDiv">
            <h1 style="color:white">hello</h1>
        </div>
        <div id="leftDiv"></div>
        <div id="rightDiv"></div>
    </div>
</body>
</html>