JavaWeb学习之CSS基础学习

最新推荐文章于 2024-08-16 20:24:29 发布

种棵马拉松

最新推荐文章于 2024-08-16 20:24:29 发布

阅读量154

点赞数

分类专栏： JavaWeb 文章标签： css web

本文链接：https://blog.csdn.net/WOD_MAAYA/article/details/108127528

版权

JavaWeb 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

二 CSS

css是层叠样式表单，是用于增强控制网页样式并允许将样式信息与网页内容分离的一种标记性语言

1.CSS语法规则

选择器：浏览器根据选择器决定收CSS样式影响的html元素（标签）
属性（property）：是你要改变的样式名，并且每个属性都有一个值，属性与值被冒号分隔开，并由花括号包围，这样就组成了一个完整的样式声明（declaration）。例如：p{color:blue}
多个声明：如果需要定义不止一个声明，则需要用分号将每个声明隔开。虽然最后一条声明的最后可以不加分号（但尽量在每条声明的末尾都加上分号），例如：

/*一般一行只描述一个属性*/
p{color:red;
font-size:30px;
}

CSS和HTML的结合方式

1 第一种结合方式

即在html文件的基础上再标签的style属性中进行设置。
在标签的style属性上设置key:value value;，即可修改标签样式，如设置div标签的显示样式：
<div style="border-color: aqua;border-width:10px;border-style: solid">奥斯卡电话卡活动啦</div>
但是这种方式可读性非常差，而且CSS代码几乎没有什么可读性可言。一旦html标签过多，代码量也会变得非常庞大。

2 第二种结合方式

在head标签中，使用style标签来定义自己所需要的各种样式（style标签专用于设置 html显示样式，其中写的是CSS代码。style标签内部不能够书写html注释等代码。）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一种结合方式</title>
    <style>
        div{
            border:blue 10px solid;
        }
        span{
            border:blue 10px solid;
        }
        p{
            border:blue 10px solid;
        }
    </style>
</head>
<body>
<div>奥斯卡电话卡活动啦</div>
<span>奥斯卡电话卡活动啦</span>
<p>奥斯卡电话卡活动啦</p>
</body>
</html>

但是这种方式也存在一些缺点：只能在同一页面中使用这些样式，不能再多个页面中复用CSS代码来达到统一样式。因此维护起来会非常的不方便。

3 第三种结合方式

把CSS样式写成一个单独的CSS文件，再通过link标签引入即可复用。
使用html的<link rel="stylesheet" type="text/css" href=css文件地址>标签，就可以导入css样式文件
下面是css样式文件的代码：

div{
    border: blue 10px solid;
}
span{
    border: blue 10px solid;
}

接着就在html文件中导入css样式文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第三种结合方式</title>
    <!-- link标签是专门用于导入文件或者链接的 -->
    <link rel="stylesheet" type="text/css" href="第三种结合样式.css">
</head>
<body>
<span>这是一种样式举例</span>
<br/>
<div>这也是一种样式举例</div>
</body>
</html>

CSS选择器

为了显示方便，这里都使用第二种结合方式举例展示

标签名选择器

标签名选择器的格式是：

标签名{
    属性:值;
}

标签名选择器，可以决定那些标签被动的使用这个样式。实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS选择器</title>
    <style type="text/css">
        div{
            border:blue 10px solid;
            color: aqua;
            font-size:10px;
        }
        span{
            border:10px blue solid;
            color: blueviolet;
            font-size: 10px;
        }
    </style>
</head>
<body>
<div>
    你们好1
</div>
<span>
    你们也好！
</span>

</body>
</html>

id选择器

id选择器的格式是：

#id属性值{
    属性:值;
}

id选择器，可以让我们通过标签的id属性选择性的去使用这个样式。实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id选择器</title>
    <style type="text/css">
        #id001{
            color: blueviolet;
            font-size: 10px;
            border:10px burlywood solid;
        }

        #id002{
            color: blueviolet;
            font-size: 20px;
            border:5px burlywood solid;
        }
    </style>
</head>
<body>
<div id="id001">
    这是id001的样式
</div>
<span id="id002">
    这是id002的样式
</span>
</body>
</html>

类选择器

class类型选择器的格式是：

.class{
    属性:值;
}

class类型选择器，可以通过class属性有效的选择性的去使用样式。举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
    <style type="text/css">
        .class01{
            border: blueviolet 10px solid;
            color: aquamarine;
            font-size: 10px;
        }

        .class02{
            border: blueviolet 20px solid;
            color: bisque;
            font-size: 15px;
        }

    </style>
</head>
<body>
<div class="class01">这是div class01的演示</div>
<div class="class01">这是div class01的演示</div>
<div class="class02">这是div class02的演示</div>

<span class="class01">这是span class01的演示</span>
<span class="class01">这是span class01的演示</span>
<span class="class02">这是span class02的演示</span>
</body>
</html>

组合选择器

组合选择器的格式是：

选择器1,选择器2，选择器n{
    属性:值;
}

组合选择器可以让多个选择器共用同一个CSS样式代码（标签选择器，id选择器，类选择器）。举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组合选择器</title>
    <style type="text/css">
        #id008,.class051,div{
            border: coral 10px solid;
            font-size: 20px;
            color: darkorange;
        }
        .id999{
            border: darkorange 99px double;
            font-size: 100px;
            color: burlywood;
        }
    </style>
</head>
<body>
<div>这是div 的自定标准格式</div>
<div class="id999">这是div 的id999格式</div>

<span class="id999">这是span 的id999格式</span>
</body>
</html>

注意：在使用选择器时，要注意以下几点：

使用标签选择器时，所有的该标签都会使用指定的该样式。
使用id选择器时，只有标签的id属性符合时，才会使用指定的该样式。但是id属性不能重复，因此id选择器的样式只能使用一次。
使用类选择器时，只有标签的class属性符合时，才会使用指定的该样式。但是class属性是可以重复的，因此类选择期待样式可以使用多次。
当同时指定了标签选择器，id选择器和类选择器时，id选择器优先级最高，类选择器优先级次之，最后是标签选择器。

常用样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用样式</title>
    <style type="text/css">
        div{
            color: red;
            width: 19px;
            height: 20px;
            background-color: #0F2D4C;
            font-size: 20px;
            border: 1px solid red;
            margin-left: auto;
            margin-right: auto;
            text-align: center;
            text-decoration: none;
        }
        table{
            border: 1px solid black;
            border-collapse: collapse;
        }
        td,th{
            border: 1px solid red;
        }
        ul{
            list-style: none;
        }
    </style>
</head>
<body>
<ul>
    <li>111111111111</li>
    <li>111111111111</li>
    <li>111111111111</li>
    <li>111111111111</li>
    <li>111111111111</li>
</ul>
<table>
    <tr>
        <td>1.1</td>
        <td>1.2</td>
    </tr>
</table>
<a href="http://www.baidu.com">百度</a>
<div>我是div标签</div>

</body>
</html>

种棵马拉松

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb学习之CSS基础学习

二 CSScss是层叠样式表单，是用于增强控制网页样式并允许将样式信息与网页内容分离的一种标记性语言1.CSS语法规则选择器：浏览器根据选择器决定收CSS样式影响的html元素（标签）属性（property）：是你要改变的样式名，并且每个属性都有一个值，属性与值被冒号分隔开，并由花括号包围，这样就组成了一个完整的样式声明（declaration）。例如：p{color:blue}多个声明：如果需要定义不止一个声明，则需要用分号将每个声明隔开。虽然最后一条声明的最后可以不加分号（但尽量在每条声明的末
复制链接

扫一扫

专栏目录