JavaWeb-CSS

Neo丶

已于 2023-03-20 12:17:52 修改

阅读量665

点赞数

文章标签： css 学习前端

于 2023-01-02 10:04:33 首次发布

本文链接：https://blog.csdn.net/ego_ekko/article/details/128507043

版权

技术介绍

CSS是层叠样式表单，用于增强控制网页样式并允许样式信息与网页内容分离的一种标记性语言。CSS 是一种描述 HTML 文档样式的语言，描述应该如何显示 HTML 元素。

语法规则

选择器名{
    属性:值
}

选择器：用于“查找”（或选取）要设置样式的 HTML 元素。浏览器根据"选择器"决定受CSS样式影响的HTML元素（标签）
CSS 选择器分为五类：
        ①简单选择器（根据名称、id、类来选取元素）
        ②组合器选择器（根据它们之间的特定关系来选取元素）
        ③伪类选择器（根据特定状态选取元素）
        ④伪元素选择器（选取元素的一部分并设置其样式）
        ⑤属性选择器（根据属性或属性值来选取元素）

属性：需要改变的样式名，并且每个属性都有一个值。属性和值之间被冒号分开，并由花括号包围，组成一个完整的样式声明。

多个声明：如果定义不止一个声明，则需要用分号将每一个声明分开。

CSS注释：/*注释内容*/

CSS与HTML的结合方式

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

缺点：如果标签过多，样式代码繁多，可读性差，可复用性差

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS和HTML结合使用的第一种方式</title>
</head>
<body>
  <div style="border: 1px solid red; width: 100px; height: 100px; background-color: red; text-align: center">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>

第二种：在head标签中，使用style标签定义需要使用的CSS样式

缺点：只能在同一页面内复用代码，不能在多个页面复用CSS代码，不便维护，需要到每个页面进行代码修改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS和HTML结合方式（第二种）</title>
    <!-- style标签专门用来定义css样式代码 -->
    <style type="text/css">
        /*css注释*/
        div{
            border: 1px solid red;
        }
        span{
            border: 1px solid blue;
        }
    </style>
</head>
<body>
    <div>div标签1</div>
    <div>div标签2</div>
    <div>div标签3</div>
    <div>div标签4</div>
    <div>div标签5</div>
    <div>div标签6</div>
    <span>span标签1</span>
    <span>span标签2</span>
    <span>span标签3</span>
    <span>span标签4</span>
    <span>span标签5</span>
    <span>span标签6</span>
</body>
</html>

第三种：在CSS文件中单独写入CSS样式，通过link标签引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS与HTML结合方式（第三种）</title>
    <!-- link标签专门用来引入css样式代码 -->
    <link rel="stylesheet" href="CSS与HTML结合方式（第三种）.css">
</head>
<body>
  <div>div标签1</div>
  <div>div标签2</div>
  <span>span标签1</span>
  <span>span标签2</span>
</body>
</html>

div{
    border: 1px solid red;
}

span{
    border: 1px solid blue;
}

CSS选择器

标签选择器

标签选择器可以指定标签使用该样式

标签名称{
    属性:值;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>
    <link rel="stylesheet" href="标签选择器.css">
</head>
<body>
  <div>div标签1</div>
  <div>div标签2</div>
  <span>span标签1</span>
  <span>span标签2</span>
</body>
</html>

div{
    border: 1px solid yellow;
    color: blue;
    font-size: 30px;
}
span{
    border: 5px dashed blue;
    color: yellow;
    font-size: 20px;
}

id选择器

id选择器可以通过id属性选择性的使用该样式

#id属性名{
    属性：值;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ID选择器</title>
    <link rel="stylesheet" href="ID选择器.css">
</head>
<body>
  <div id="div001">div标签1</div>
  <div id="div002">div标签2</div>
</body>
</html>

#div001{
    color: blue;
    font-size: 30px;
    border: 1px solid yellow;
}
#div002{
    color: red;
    font-size: 20px;
    border: 5px dotted blue;
}

类选择器

类选择器通过class属性选择性的使用该样式

.class属性名{
    属性：值;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
    <link rel="stylesheet" href="类选择器.css">
</head>
<body>
  <div class="class001">div标签class001</div>
  <div class="class002">div标签class002</div>
  <span class="class001">span标签class001</span>
  <span>span标签02</span>
</body>
</html>

.class001{
    color: blue;
    font-size: 30px;
    border: 1px solid yellow;
}
.class002{
    color: gray;
    font-size: 26px;
    border: 1px solid red;
}

组合选择器

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组合选择器</title>
    <link rel="stylesheet" href="组合选择器.css">
</head>
<body>
    <div class="divClass001">div标签class001</div><br/>
    <span id="spanID001">span标签id001</span><br/>
    <div>div标签</div><br/>
    <div id="divID001">div标签id001</div>
</body>
</html>

.divClass001,#spanID001,#divID001,div{
    color: blue;
    font-size: 20px;
    border: 1px solid yellow;
}

常用样式

颜色：

color：blue

颜色可以写成颜色的英文名称如：black，blue，red，yellow等

颜色也可以写成rgb和十六进制表示的值如：rbg(255.255.0)，#00F6DE，十六进制前必须加#号

宽度：

width:300px

宽度可以写成像素值如：100px;

也可以写成百分比值：20%;

高度：

height:200px

高度可以写成像素值如：100px;

也可以写成百分比值：20%;

背景颜色：

background-color:#0F2D4C;

字体样式：

color:#FF0000; 字体颜色

font-size:20px; 字体大小

边框样式：

border:1px solid red; 红色1像素实现边框

DIV居中样式：

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 black; /*设置边框*/

}

列表去除修饰：

ul{

list-style:none;

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用样式</title>
    <link rel="stylesheet" href="常用样式.css">
</head>
<body>
    <div>div标签</div>
    <a href="https://www.baidu.com">百度</a>
    <table>
        <tr>
            <td>1.1</td>
            <td>1.2</td>
            <td>1.3</td>
        </tr>
        <tr>
            <td>2.1</td>
            <td>2.2</td>
            <td>2.3</td>
        </tr>
        <tr>
            <td>3.1</td>
            <td>3.2</td>
            <td>3.3</td>
        </tr>
    </table>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
    </ul>
</body>
</html>

div{
    color: #0000ff;
    border: 1px solid red;
    width: 200px;
    height: 100px;
    background-color: green;
    font-size: 30px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
a{
    text-decoration: none;
}
table{
    border: 1px solid black;
    border-collapse: collapse;
}
tr,td{
    border: 1px dashed blue;
}
ul{
    list-style: none;
}

Neo丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb-CSS

CSS是层叠样式表单，用于增强控制网页样式并允许样式信息与网页内容分离的一种标记性语言。CSS 是一种描述 HTML 文档样式的语言，描述应该如何显示 HTML 元素。选择器：用于“查找”（或选取）要设置样式的 HTML 元素。浏览器根据"选择器"决定受CSS样式影响的HTML元素（标签）
复制链接

扫一扫