最好的0基础CSS入门到毕业案例入门

最新推荐文章于 2024-05-16 15:30:42 发布

听~宇

最新推荐文章于 2024-05-16 15:30:42 发布

阅读量92

点赞数

分类专栏：前端三件套文章标签： java

本文链接：https://blog.csdn.net/qq_47518713/article/details/124041946

版权

前端三件套专栏收录该内容

15 篇文章 1 订阅

订阅专栏

一.先来一波概念

1、什么是CSS，有什么作用？
   CSS(Cascading Style Sheet):层叠样式表语言。
   CSS的作用是：
       修饰HTML页面，设置HTML页面中的某些元素的样式，让HTML页面更好看。
       CSS好比是HTML的化妆品一样。
   HTML还是主体，CSS依赖HTML。CSS的存在就是修饰HTML，所以新建的文件还是xx.html文件。

2、CSS我们要求掌握到什么程度？
   * 常见的CSS样式要求会写。
   * 别人写的CSS样式要能看懂。

3、在HTML页面中嵌套使用CSS的三种方式：

   第一种方式：在标签内部使用style属性来设置元素的CSS样式，这种方式称为内联定义方式。
       语法格式：
           <标签 style="样式名:样式值;样式名:样式值;样式名:样式值;..."></标签>

   第二种方式：在head标签中使用style块，这种方式被称为样式块方式。
       语法格式：
           <head>
               <style type="text/css">
                   选择器 {
                       样式名 : 样式值;
                       样式名 : 样式值;
                       .....
                   }
                   选择器 {
                       样式名 : 样式值;
                       样式名 : 样式值;
                       .....
                   }
               </style>
           </head>

   第三种方式：链入外部样式表文件，这种方式最常用。（将样式写到一个独立的xxx.css文件当中，在需要的网页上
   直接引入css文件，样式就引入了）
       语法格式：
           <link type="text/css" rel="stylesheet" href="css文件的路径" />

       这种方式易维护，维护成本较低。
           xxx.css文件
               1.html中引入了
               2.html中引入了
               3.html中引入了
               4.html中引入了

二. 案例讲解

(一）CSS引入第一种方式

内联样式通过style属性直接套进HTML中去。

我们的建议是，HTML应该是独立的、样式自由的文档，所以内联样式无论在什么情况下都应该尽量避免。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="width : 300px; height : 300px; background-color : #CCFFFF; display : block;
                border-color : red;border-width : 1px;border-style : solid;">
    
    </div>
</body>
</html>

display 布局样式（none表示隐藏，block表示显示）

(二）CSS引入第二种方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">/*这是css注释*/

    /*id选择器*/
        #usernameErrorMsg{
            color: aqua;
            font-size: 12px;
        }
    /* 标签选择器  标签选择器作用的范围比id选择器广。 */
        div{
            background-color: #CCFFFF;
            width: 100px;
            height: 100px;
        }
    /*类选择器*/
        .student{
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div>
        <td id="usernameErrorMsg">对不起，用户名不能为空！</td>
    </div>
    <div>
        <input class="student" type="radio" name="gender" value="boy" checked>男
        <input type="radio" name="gender" value="girl">女
    </div>
</body>
</html>

(三）CSS引入第三种方式

怎么引入

如果这个文档存为“web.css”的话，它可以这样跟HTML文档连接起来：

<html> 
<head> <title>CSS Example</title>
 <link rel="stylesheet" type="text/css" href="web.css" />

web.css

p{
    color: chartreuse;
    font-size: 30px;
}
div{
    width: 300px;
    height: 200px;
    background-color: #CCFFFF;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link type="text/css" href="web.css" rel="stylesheet">
</head>
<body>
    <p>afegasvdagea</p>
    <div>
        fsdafvsdv
    </div>
</body>
</html>

运行效果