web开发之CSS知识点总结

nuist__NJUPT

已于 2022-08-16 16:12:13 修改

阅读量219

点赞数

分类专栏： Javaweb整理文章标签： css 前端 html

于 2022-08-16 16:11:36 首次发布

本文链接：https://blog.csdn.net/nuist_NJUPT/article/details/126365807

版权

Javaweb整理专栏收录该内容

23 篇文章 2 订阅

订阅专栏

CSS通常称为CSS样式或者层叠样式表，主要用于修饰HTML页面的文本内容(字体，大小，颜色)等，图片的外形(高宽，边框样式，边距)等以及版面的布局等外观样式，CSS可以使得HTML页面更美观，CSS的色调搭配使得用户体验更好，CSS+DIV样式更加灵活，更丰富多彩地展示超文本信息。

1-CSS之元素选择器

以HTML标签名称作为选择器的即为元素选择器，选择CSS样式代码，选择CSS样式名代码，作用于对应的标签名的标签上。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css代码格式规范</title>
    <style>
        /**
        这是css标签的规范写法,style标签放到head标签种,
        里面是选择器的名称,内部是属性名:属性值
         */
        span{
            color: blue;
            font-size: 100px;
            border: 1px solid red;
        }
        div{
            color: deepskyblue;
            font-size: 100px;
            border: 2px solid yellow;
        }
    </style>
</head>
<body>
<span>这是行级的块</span>
<div>这是块级的块</div>
</body>
</html>

2-CSS元素之类选择器

使用类名作为选择器的名称即为类选择器，一般作用于同一元素的不同类。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的类选择器</title>
    <style>
        .span1{
            color: red;
            font-size: 100px;
        }
        .div1{
            color: blue;
            font-size: 40px;
        }
    </style>
</head>
<body>
<span class="span1">这是一个行级的块</span>
<span>这也是一个行级的块</span>
<div class="div1">这是一个块级的块</div>
<div >这也是一个块级的块</div>
</body>
</html>

3-CSS之ID选择器

该选择器适用于作用在某一个标签上，具体如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的ID选择器</title>
    <style>
        #span1{
            color:red;
        }
        #div1{
            color: blue;
        }
        #div2{
            font-size: 100px;
        }
    </style>
</head>
<body>
<span id="span1">我是红色</span>
<span>我是黑色</span>
<div id="div1">我是蓝色</div>
<div id="div2">我是100px大小</div>
</body>
</html>

4-CSS之组合选择器

组合选择器就是选择器的嵌套形式，具体如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS之组合选择器</title>
    <style>
        
        div{
            color: blue;
        }
        <!--这是一个组合选择器-->
        div font{
            color: red;
        }

    </style>
</head>
<body>
<div>
    <font>我是红色</font>
    我是蓝色
</div>
</body>
</html>

5-CSS之边框属性

常用的边框属性包括边框，宽度，高度，背景颜色等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的边框属性</title>
    <style>
        /**
        四个边框属性：边框线,宽度,高度,背景颜色
         */
        div{
            border: 1px solid red;
            width: 100px;
            height: 100px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
<div>这是一个边框</div>
</body>
</html>

6-CSS之常用样式

通常默认的排版方式是从上到下，实际开发中需要左右罗列，需要使用浮动标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS之常用样式</title>
    <style>
        /**
        使用float标签设置浮动，可以居左或者居右的浮动
         */
        #div1{
            background-color: red;
            width: 100px;
            height: 100px;
            float: left;
        }
        #div2{
            background-color: green;
            width: 100px;
            height: 100px;
            float: left;
        }
        #div3{
            background-color: blue;
            width: 100px;
            height: 100px;
            float: left;
        }
    </style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>

样式转换，使用display一般可以将某种样式转换为另外一种样式，具体如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS样式之转换</title>
    <style>
        div{
            display: inline;
        }
        li{
            display: inline;
        }
        span{
            display: block;
        }
    </style>
</head>
<body>
<h1>由块级元素到行级元素</h1>
<div>div1</div>
<div>div2</div>
<h2>块转换成行</h2>
<ul>
    <li>第1行</li>
    <li>第2行</li>
    <li>第3行</li>
</ul>
<h3>行转换成块</h3>
<span>span1</span>
<span>span2</span>
</body>
</html>

7-CSS之盒子模型

所有的HTML元素都可以看做成一个盒子，用CSS来设置元素的内边距，边框，内边距等，相当于设置盒子的样式，因此我们称为盒子模型。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS之盒子模型</title>
    <style>
        /**
        board设置边框,padding设置内边距,margin设置外边距
         */
        div{
            border: 1px solid red;
            padding: 10px;
            margin: 10px;
        }
    </style>
</head>
<body>
<div>内容体</div>
</body>
</html>

8-CSS与HTML的结合方式

CSS与HTML的结合方式主要有两种，一种是内部结合方式，另一种是外部结合方式，具体如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS之与HTML结合方式</title>
    <!--引用外部CSS样式-->
    <link rel="stylesheet" type="text/css" href="demo1.css">
    <!--这种内部样式适合样式复用-->
    <style>
        b{
            color: red;
            font-size: 10px;
        }
    </style>
</head>
<body>

<!--内部样式,针对性强-->
<a style="color: blue; font-size: 10px">学习编程</a>
<b>好好学习啊</b>
<b>好好学习哦</b>

<!--外部样式修饰-->
<c>外部样式修饰</c>
</body>
</html>

nuist__NJUPT

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
web开发之CSS知识点总结

CSS通常称为CSS样式或者层叠样式表，主要用于修饰HTML页面的文本内容(字体，大小，颜色)等，图片的外形(高宽，边框样式，边距)等以及版面的布局等外观样式，CSS可以使得HTML页面更美观，CSS的色调搭配使得用户体验更好，CSS+DIV样式更加灵活，更丰富多彩地展示超文本信息。......
复制链接

扫一扫