Web前端----CSS入门

最新推荐文章于 2024-07-21 16:09:52 发布

xxyneymar

最新推荐文章于 2024-07-21 16:09:52 发布

阅读量80

点赞数

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

本文链接：https://blog.csdn.net/xxyneymar/article/details/120656774

版权

javaWeb 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

1.简介

1.1 CSS概述

CSS：Cascading Style Sheet，层叠样式表语言。

CSS的作用是：修饰HTML页面，设置HTML页面中的某些元素的样式，让HTML页面更好看。

HTML还是主体，CSS依赖HTML。CSS的存在就是修饰HTML，所以新建的文件还是.html文件。

2.HTML引入CSS样式的三种方式

2.1 第一种方式：内联定义方式

第一种方式是在标签内部使用style属性来设置元素的CSS样式，这种方式称为内联定义方式。

语法格式：

<标签 sthle="样式名:样式值;样式名:样式值;样式名:样式值;"></标签>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML中引入CSS样式的第一种方式：内敛定义方式</title>
</head>
<body>
    <!--
        width 宽度样式
        height 高度样式
        background-color 背景色样式
        display 布局样式（none表示隐藏，block表示显示）
    -->
    <div style="width: 300px;height: 300px;background-color: cyan;display: block;border-color: blueviolet;border-width: 1px;border-style: solid"></div>
    <br><br>
    <!--
        样式还可以这样写：
            border: black 1px solid;
    -->
    <div style="width: 300px;height: 300px;background-color: cyan;display: block;border: black 1px solid;"></div>
</body>
</html>

2.2 第二种方式：定义内部样式块

在<head>标签块种使用style块。<style></style>。

语法格式：

<head>

选择器{

样式名:样式值;

}

选择器{

样式名:样式值;

}

</style>

</head>

三种选择器：

①id选择器。语法格式：

                #id{
        样式名:样式值;
        样式名:样式值;

...
}

②标签选择器。语法格式：

标签名 {

                        样式名:样式值;
      样式名:样式值;
      ...
}

③类选择器。语法格式：

.类名 {
样式名:样式值;
样式名:样式值;
...
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML中引入CSS样式的第二种方式：样式块</title>

    <style type="text/css">
        /*
            这是CSS的注释
         */
        
        #usernameErrorMsg{
            color: red;
            font-size: 12px;
        }

        div{
            background-color: blue;
            border: 1px solid red;
            width: 100px;
            height: 100px;
        }

        .myclass {
            border: red 1px solid;
            width: 200px;
            height: 40px;
        }
    </style>
</head>
<body>
     <!--
         设置样式字体大小12px，颜色为红色！
     -->
     <span id="usernameErrorMsg">对不起，用户名不能为空</span>
     
     <div></div>
     <div></div>
     <div></div>

     <!--class相同的标签可以认为是同一类标签。-->
     <br><br><br>
     <input type="text" class="myclass"/>
     <br><br><br>
     
     <select class="myclass">
         <option>专科</option>
         <option>本科</option>
     </select>

</body>
</html>

2.3 第三种方式：链入外部样式表文件

这种方式最常用，将样式写到一个独立的xxx.css文件当中，在需要的网页上直接引入css文件，样式就引入了。这种方式易维护，维护成本较低。

语法格式：

比如当前有一个a.css文件：

a {
    text-decoration: none;
}

/*
   cursor：鼠标样式，pointer是小手，hand也是，但是hand有浏览器兼容问题。建议使用pointer
 */

#baiduSpan {
    text-decoration: underline;
    cursor: pointer;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML中使用CSS样式的第三种方式：引入外部独立的css文件</title>

    <!--引入css-->
    <link rel="stylesheet" type="text/css" href="css文件/1.css">
</head>
<body>
    <a href="http://www.baidu.com">百度</a>
    <span id="baiduSpan">点击我链接到百度哦</span>
</body>
</html>

3.其他常用样式

3.1 列表样式

list-style-type

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表样式</title>
    <style type="text/css">
        ul{
            list-style-type: disc;
        }
    </style>
</head>
<body>
    <ul>
        <li>中国
            <ul>
                <li>北京</li>
                <li>上海</li>
                <li>重庆</li>
            </ul>
        </li>
        <li>美国</li>
        <li>日本</li>
    </ul>
</body>
</html>

3.2 CSS样式的绝对定位

position

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS样式的绝对定位</title>
    <style type="text/css">
        #div1{
            background-color: blue;
            border: 1px solid black;
            width: 300px;
            height: 300px;
            position: absolute;/*绝对定位*/
            left:100px;
            top: 100px;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
</body>
</html>

PS：根据动力节点课程总结，如有侵权，联系删除。

xxyneymar

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web前端----CSS入门

1.简介1.1 CSS概述 CSS：Cascading Style Sheet，层叠样式表语言。 CSS的作用是：修饰HTML页面，设置HTML页面中的某些元素的样式，让HTML页面更好看。 HTML还是主体，CSS依赖HTML。CSS的存在就是修饰HTML，所以新建的文件还是.html文件。2.HTML引入CSS样式的三种方式2.1 第一种方式：内联定义方式第一种方式是在标签内部使用style属性来设置元素的CSS样式，这种方式称为内联定义方式。语法...
复制链接

扫一扫