JavaWeb --- CSS

乌云不要说话

已于 2023-03-27 13:13:45 修改

阅读量711

点赞数

分类专栏： JavaWeb 文章标签： css 学习前端

于 2023-02-28 20:32:42 首次发布

本文链接：https://blog.csdn.net/a1404359447/article/details/129267134

版权

JavaWeb 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一、CSS技术介绍

CSS是「层样式表单」。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

二、CSS语法规则

三、CSS和HTML结合方式

第一种

在标签的style属性上设置key:value value”，修改标签样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css01</title>
</head>
<body>
    <div style="border: 1px solid red">div标签1</div>
    <div style="border: 1px solid red">div标签2</div>
    <span style="border: 1px solid red">span标签1</span>
    <span style="border: 1px solid red">span标签2</span>
</body>
</html>

缺点：
1、如果标签多了，样式多了，代码量非常庞大

2、可读性非常差

3、css代码没什么复用性可言

第二种

在head标签中，使用style标签来定义各种自己需要的css样式。格式如下：

XXX {

Key：value value

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css02</title>
    <!--style标签专门用来定义css代码-->
    <style type="text/css">
        div{
            border: 1px solid red;
        }
        span{
            border: 1px solid red;
        }
    </style>
</head >
<body>
    <div >div标签1</div>
    <div >div标签2</div>
    <span >span标签1</span>
    <span >span标签2</span>
</body>
</html>

缺点：

1、只能在同一页面内复用代码，不能在多个页面中复用css代码。

2、维护起来不方便，实际的项目中会有成上万的页面，要到每个页面中去修改，工作量太大了。

第三种

把css样式写一个单独的css文件，再通过link标签引入即可复用。

使用html的 <link rel="stylesheet" type="text/css" href="./styles.css" /> 标签导入css样式文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css03</title>
    <!--ink标签专门用来引入css样式代码-->
    <link rel="stylesheet" type="text/css" href="1.css" />
</head >
<body>
    <div >div标签1</div>
    <div >div标签2</div>
    <span >span标签1</span>
    <span >span标签2</span>
</body>
</html>

四、CSS选择器

标签名选择器

标签名选择器，可以决定哪些标签被动的使用这个样式

标签名 {

属性:值;

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签名选择器</title>
    <style type="text/css">
        div{
            border: 1px solid yellow;
            color: blue;
            font-size: 30px;
        }
        span{
            border: 5px dashed blue;
            color: yellow;
            font-size: 20px;
        }
    </style>
</head >
<body>
    <div >div标签1</div>
    <div >div标签2</div>
    <span >span标签1</span>
    <span >span标签2</span>
</body>
</html>

id选择器

可以让我们通过id属性选择性的去使用这个样式

#id {

属性:值;

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id选择器</title>
    <style type="text/css">
        #id001{
            border: 1px solid yellow;
            color: blue;
            font-size: 30px;
        }
        #id002{
            border: 5px dotted blue;
            color: red;
            font-size: 20px;
        }
    </style>
</head >
<body>
    <div id="id001">div标签1</div>
    <div id="id002">div标签2</div>
</body>
</html>

class选择器

class类型选择器，可以通过class属性有效的选择性地去使用这个样式

.class {

属性:值;

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>class选择器</title>
    <style type="text/css">
        .class01{
            border: 1px solid yellow;
            color: blue;
            font-size: 30px;
        }
        .class02{
            border: 5px solid red;
            color: red;
            font-size: 26px;
        }
    </style>
</head >
<body>
    <div class="class01">div标签1</div>
    <div class="class02">div标签2</div>
</body>
</html>

组合选择器

组合选择器可以让多个选择器共用同一个css样式代码

选择器1，选择器2，选择器n {

属性:值;

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组合选择器</title>
    <style type="text/css">
        .class01, #id001{
            border: 1px solid yellow;
            color: blue;
            font-size: 20px;
        }
    </style>
</head >
<body>
    <div class="class01">div标签class01</div>
    <span id="id001">标签id01</span>
</body>
</html>

五、常用样式

1、字体颜色

color:red;

颜色可以写颜色名如：black，blue，red，green等

颜色也可以写rgb值和十六进制表示值：如rgb（25500）， #00F6DE，如果写十六进制值必须加#

2、宽度

width:19px;

宽度可以写像素值：19px；也可以写百分比值：20%；

3、高度

height:19px;

高度可以写像素值：19px；也可以写百分比值：20%；

4、背景颜色

background-color:#0F2D40;

5、字体样式

color:#FF0000; 字体颜色红色

ont-size:20px; 字体大小

6、红色1像素实线边框

border:1px solid red;

7、DIV居中

margin-left:auto;

margin-right:auto;

8、文本居中

text-align:center;

9、超连接去下划线

text-decoration:none

10、表格细线

table ｛

        border:1px solid black；/*设置边框*/

        border-collapse:collapse；/*将边框合并*/

｝
tdth｛

        border:1px solid black；/*设置边框*/

｝

11、列表去除修饰

ul ｛

list-style:none

｝

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css常用样式</title>
    <style type="text/css">
        div{
            Color:red;
            border:1px solid yellow;
            width:300px;
            height:300px;
            background-color:green;
            font-size:30px;
            margin-left:auto;
            margin-right:auto;
            text-align:center;
        }
        a{
            text-decoration: none;
        }
        table{
            border:1px solid red;
            border-collapse:collapse;
        }
        td{
            border:1px solid red;
        }
        ul{
            list-style: none;
        }
    </style>
</head >
<body>
    <ul>
        <li>11111</li>
        <li>22222</li>
    </ul>
    <table>
        <tr>
            <td>1.1</td>
            <td>1.2</td>
        </tr>
    </table>
    <a href="https://www.baidu.com/">百度</a>
    <div >div标签</div>


</body>
</html>