CSS技术

最新推荐文章于 2024-02-05 16:08:07 发布

黑入腾讯的小龙女

最新推荐文章于 2024-02-05 16:08:07 发布

阅读量59

点赞数

分类专栏： JavaWeb

本文链接：https://blog.csdn.net/weixin_55856743/article/details/119489085

版权

JavaWeb 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.CSS技术的介绍

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

2.CSS的语法规则

选择器：浏览器根据“选择器”决定受CSS样式影响的HTML元素（标签）
属性：是你要改变的样式名，并且每一个属性都有一个值，属性和值被冒号分开，并且用花括号包围，这样就组成了一个完整的样式声明
多个声明：用分号将每个声明分开，最后可以不加分号
注意：一般每一行只描述一个属性
CSS注释：/* 注释内容 */

3.CSS和HTML的结合方式

第一种方式：
在标签的style属性上设置"key:value value",修改标签样式

<body>
<!--
需求：修改使得每个div标签的样式为：边框一个像素，实线，红色
-->
   <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>
   <p style="border: 1px solid red;">p段落标签1</p>
   <p style="border: 1px solid red;">p段落标签2</p>
</body>

缺点：
1.样式多，代码多
2.可读性差
3.CSS代码没什么复用性可言

第二种方式：
在head标签中使用style标签来定义各种自己需要的CSS样式
格式如下：
xxx{
Key:value value;
}

<head>
    <meta charset="UTF-8">
    <title>其他标签</title>
    <!--style标签专门用来定义css样式代码-->
    <style type="text/css">
        /*css中的注释： 需求：修改使得每个div标签的样式为：边框一个像素，实线，红色*/
        div{
            border: 1px solid red;
        }
        span{
            border: 1px solid red;
        }
    </style>
</head>

缺点：
1.只能在同一页面内复用代码
2.维护起来不方便，工作量大

第三种方式：
把css样式写成一个单独的css文件，再通过ink标签引入即可复用

<head>
    <meta charset="UTF-8">
    <title>其他标签</title>
    <!--link标签专门用来引入css样式代码-->
    <link rel="stylesheet" type="text/css" href="1.css"/>
</head>

新建Stylesheet

div{
    border: 1px solid red;
}
span{
    border: 1px solid red;
}

4.css的选择器

1.标签名选择器
标签名选择器的格式是：
标签名{
属性：值；
}
标签名选择器，可以决定那些标签被动的使用这个样式

<head>
    <meta charset="UTF-8">
    <title>其他标签</title>
    <style type="text/css">

        div{
            border: 1px solid red;
            color:blue;
            font-size: 30px;
        }
        span{
            border: 1px solid red;
            color:yellow;
            font-size: 20px;
        }
        </style>
</head>

2.id选择器
id选择器的格式：
#id属性值{
属性：值
}
id选择器，可以让我们通过id属性选择性的去使用这个样式

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

    </style>
</head>
<body>

<div id="id001">div标签1</div>
<div id="id002">div标签2</div>

</body>
</html>

3.class类型选择器
class类型选择器的格式：
.class属性值{
属性：值；
}
class类型选择器，可以通过class属性有效的选择性地去使用这个样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>其他标签</title>
    <style type="text/css">
        .class01{
            color:blue;
            font-size: 30px;
            border: 1px yellow solid;
        }
        .class02{
            color:red;
            font-size: 20px;
            border: 5px yellow dotted;
        }

    </style>
</head>
<body>

<div class="class01">div标签1</div>
<div class="class02">div标签2</div>
<span class="class01">span标签1</span>
<span>span标签2</span>

</body>
</html>

4.组合选择器
组合选择器的格式：
选择器1，选择器2，选择器n{
属性：值；
}
组合选择器可以让多个选择器共用同一个css样式代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>其他标签</title>
    <style type="text/css">
        .class01,#id001{
            color:blue;
            font-size: 30px;
            border: 1px yellow solid;
        }
    </style>
</head>
<body>

<div class="class01">div标签1</div>
<div>div标签2</div>
<span id="id001">span标签1</span>
<span>span标签2</span>

</body>
</html>

5.常用样式

1.字体颜色：
color：red
2.黄色1像素实线边框：
border:1px yellow solid;
3.宽度、高度
width:300px;
height：300px;
4.背景颜色：
background-color:#0E2D4C
5.字体样式：
color：red
font-size:20px;字体大小
6.div居中
margin-left:auto;
margin-right:auto;
7.文本居中
text-align:center
8.超链接去下划线
text-decoration:none
9.表格细线
table{
border:1px solid black;/*设置边框 */
border-collapse:collapse;/*将边框合并 */
}
td,th{
border:1px solid black;/*设置边框 */
}
10.列表去除修饰
ul{
list-style:none;
}

黑入腾讯的小龙女

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS技术

1.CSS技术的介绍CSS是层叠样式表单。用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言2.CSS的语法规则选择器：浏览器根据“选择器”决定受CSS样式影响的HTML元素（标签）属性：是你要改变的样式名，并且每一个属性都有一个值，属性和值被冒号分开，并且用花括号包围，这样就组成了一个完整的样式声明多个声明：用分号将每个声明分开，最后可以不加分号注意：一般每一行只描述一个属性CSS注释：/* 注释内容 */...
复制链接

扫一扫

专栏目录