1. 首页
  2. 文章中心
  3. html

HTML中的CSSCSS

68 阅读 0 评论
我是靠谱客的博主 开朗菠萝，最近开发中收集的这篇文章主要介绍HTML中的CSSCSS，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

CSS

HTML对于页面上元素的样式，没有一个很好的办法进行约束，所以有了css来修改页面上元素样式,考虑一个对象的样式：颜色、大小、位置，边框，距离。

在HTML当中修改样式需要依赖CSS(cascading style sheets):层叠样式表。

层叠：就是在一个对象上，通过多重描述作用到一起形成样式。

CSS使用的方法

CSS是作用在HTML元素上的样式描述，所以在使用的时候，有三种方式：

行内式

在元素内部通过style属性进行css样式设置：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <h2 style="color: red;">G</h2>
    </body>
</html>

HTML任意标签都有style属性

嵌入式

在页面的内部，通常在头部，使用style标签，在style标签内部编写样式，这样的样式可以作用在一个页面多个共性的元素上

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            h2 {
               color: green;
            }
        </style>
    </head>
    <body>
        <h2>G</h2>
        <h2>G</h2>
        <h2>G</h2>
        <h2>G</h2>
    </body>
</html>

外链式

基于多个HTML共性的CSS，为了方便代码的维护，采用外部的CSS文件进行样式描述，这个时候需要使用link标签导入外部的CSS文件

文件结构
在这里插入图片描述

被导入的css文件

h2 {
    color: green;
}

html文件

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" type="text/css" href="css/01_CSS.css">
    </head>
    <body>
        <h2>G</h2>
        <h2>G</h2>
        <h2>G</h2>
        <h2>G</h2>
    </body>
</html>

三种使用方式不同，但是css的编写格式一致：

属性：值;

而嵌入和外链式需要使用大括号对css进行分割

{属性：值;}

CSS选择器

CSS是用来描述HTML元素的样式的，要描述就需要指定描述对象，指定的方式就是选择器。

基本选择器

标签选择器

通过标签名称选择所有该标签的元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            color: pink;
        }
    </style>
</head>
<body>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <h6>h1</h6>
    <h6>h2</h6>
    <h6>h3</h6>
</body>
</html>
id选择器

通过#id来指定页面内部对应id值的标签的样式，一个页面当中，id不可以重复，所以，id选择器只针对单个元素进行修改，和行内样式有重叠。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #red {
            color: red;
        }
    </style>
</head>
<body>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <h6 id="red">h1</h6>
    <h6>h2</h6>
    <h6>h3</h6>
</body>
</html>
类选择器

通过.class来指定页面内部对应class值的标签，类选择器在整个CSS编写过程当中使用最频繁。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .g {
           color: green;
        }
    </style>
</head>
<body>
    <p>p1</p>
    <p>p2</p>
    <p class="g">p3</p>
    <h6 id="red">h1</h6>
    <h6  class="g">h2</h6>
    <h6>h3</h6>
    <span class="g">这是一个span</span>
</body>
</html>

关系选择器

子关系

使用>连接两个选择器来表示当前标签直接嵌套的标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #w_p > span{
            color: red;
        }
    </style>
</head>
<body>
    <p id="w_p">
        <span>1</span>
        <p>
            <span>
                2
            </span>
        </p>
    </p>
</body>
</html>
后代关系

使用空格连接两个选择器来表示当前标签嵌套的标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*#w_p > span{*/
            /*color: red;*/
        /*}*/
        #w_p span{
            color: red;
        }
    </style>
</head>
<body>
    <p id="w_p">
        <span>1</span>
        <a>
            <span>
                2
            </span>
        </a>
    </p>
</body>
</html>

后代包含子

并列关系

使用,连接多个选择器来表示并列的多个标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*#w_p > span{*/
            /*color: red;*/
        /*}*/
        /*#w_p span{*/
            /*color: red;*/
        /*}*/
        #w_p,#w_p1 {
            color: red;
        }

    </style>
</head>
<body>
    <p id="w_p">
        <span>1</span>
        <a>
            <span>
                2
            </span>
        </a>
    </p>
    <p id="w_p1">
        <span>1</span>
        <a>
            <span>
                2
            </span>
        </a>
    </p>

</body>
</html>

属性选择器

基于基本选择器和关系选择器的更加细节一种选择器

选择器描述
p[age=“18”]所有age属性值为18的元素
p[id^=“w”]所有id属性值以w开头的元素
p[id$=“p”]所有id属性值以p结尾的元素
p[id*=“p”]所有id属性值包含p的元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p[age="18"]{
            color: red;
        } /*所有age属性值为18的元素*/
        p[id^="w"]{
            color: red;
        } /*所有id属性值以w开头的元素*/
        p[id$="p"]{
            color: red;
        }/*所有id属性值以p结尾的元素*/
        p[id*="p"]{
            color: red;
        }/*所有id属性值包含p的元素*/
    </style>
</head>
<body>
    <p id="w_p" age="18">
        <span>1</span>
        <a>
            <span>
                2
            </span>
        </a>
    </p>
    <p id="w_1" age="18">
        <span>1</span>
        <a>
            <span>
                2
            </span>
        </a>
    </p>
    <p id="b_p2">
        <span>1</span>
        <a>
            <span>
                2
            </span>
        </a>
    </p>
    <p id="w_p3">
        <span>1</span>
        <a>
            <span>
                2
            </span>
        </a>
    </p>
</body>
</html>

伪类选择器

当触发某个条件之后执行的选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a {
            color: red;
        }
        a:hover{
            color: green;
        }
    </style>
</head>
<body>
    <a href="#">hello world</a>
    <a href="#">hello world</a>
    <a href="#">hello world</a>
    <a href="#">hello world</a>
    <a href="#">hello world</a>
    <a href="#">hello world</a>
</body>
</html>

CSS选择器的优先级

优先级值
行内1000
id100
class10
标签1
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            color: green;
        }
    </style>
</head>
<body>
    <p style="color: red">1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
</body>
</html>

css选择器的优先级和python变量的作用域原理类似，遵循就近原则。

CSS字体样式

颜色

color 属性来决定字体的颜色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .blue{
            color: blue;
        }
        .red{
            color: red;
        }
        .orange{
            color: orange;
        }
        .green{
            color: green;
        }
    </style>
</head>
<body>
    <span class="blue">G</span>
    <span class="red">o</span>
    <span class="orange">o</span>
    <span class="blue">g</span>
    <span class="green">l</span>
    <span class="red">e</span>
</body>
</html>

大小

font-size 字体大小，单位通常是px，也可以是em，rem或者百分比。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span{
            font-size: 150px;
        }
    </style>
</head>
<body>
    <span class="blue">G</span>
    <span class="red">o</span>
    <span class="orange">o</span>
    <span class="blue">g</span>
    <span class="green">l</span>
    <span class="red">e</span>
</body>
</html>

字体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span{
            font-family: "Microsoft YaHei UI Light";
        }
    </style>
</head>
<body>
    <span class="blue">G</span>
    <span class="red">o</span>
    <span class="orange">o</span>
    <span class="blue">g</span>
    <span class="green">l</span>
    <span class="red">e</span>
</body>
</html>

粗细

font-weight,100-900粗细

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .blue{
            color: blue;
        }
        .red{
            color: red;
        }
        .orange{
            color: orange;
        }
        .green{
            color: green;
        }
        span{
            font-size: 150px;
            font-family: "Microsoft YaHei UI Light";
            font-weight: 900;
        }
    </style>
</head>
<body>
    <span class="blue">G</span>
    <span class="red">o</span>
    <span class="orange">o</span>
    <span class="blue">g</span>
    <span class="green">l</span>
    <span class="red">e</span>
</body>
</html>

样式

font-style: 通常进行文字倾斜

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .blue{
            color: blue;
        }
        .red{
            color: red;
        }
        .orange{
            color: orange;
        }
        .green{
            color: green;
        }
        span{
            font-size: 150px;
            font-family: "Microsoft YaHei UI Light";
            font-weight: 900;
            font-style: italic;/*倾斜*/
            font-style: normal;/*正常样式*/
        }
    </style>
</head>
<body>
    <span class="blue">G</span>
    <span class="red">o</span>
    <span class="orange">o</span>
    <span class="blue">g</span>
    <span class="green">l</span>
    <span class="red">e</span>
</body>
</html>

位置

缩进

text-indent: 指定首行缩进距离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            font-size: 150px;
            font-weight: 900;
            text-indent: 20px;
        }

    </style>
</head>
<body>
    <p>
        hello world
    </p>
</body>
</html>
水平

text-align进行水平方向上文字的位置的设置，包括 left(左) right(右) center(中)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            font-size: 150px;
            font-weight: 900;
            text-align: center;
        }

    </style>
</head>
<body>
    <p>
        hello world
    </p>
</body>
</html>
垂直

CSS当中，文字垂直位置是通过行高进行设置的，通常文字靠下显示，但是会在行高高度上垂直居中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            font-size: 150px;
            font-weight: 900;
            line-height: 300px;
        }

    </style>
</head>
<body>
    <p>
        hello world
    </p>
</body>
</html>
对于a标签的强调

text-decration 去掉a标签的下划线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a{
            text-decoration: none;
        }
    </style>
</head>
<body>
    <a href="#">hello world</a>
</body>
</html>

css颜色设置

在css当中通常有四种颜色表达的方式

单词

使用关于颜色的英文单词可以快速的描述颜色

red green blue yellow

rgb

工业三原色，使用 r(红) g(绿) b(蓝) 三种颜色进行混色，调和出其他颜色，在CSS当中，每种颜色的由弱到强为 0-255，

rgb(0,0,0) 黑

rgb(255,255,255) 白

rgb(255,0,0) 红

rgb(0,255,0) 绿

rgb(0,0,255) 蓝

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            font-size: 150px;
            font-weight: 900;
            text-align: center;
            line-height: 300px;
            color: rgb(0,0,0);
        }
    </style>
</head>
<body>
    <p>
        hello world
    </p>
</body>
</html>

十六进制

在css当中采用#6位16进制数，进行颜色表述，rgb分别占2位。

255 FF

#FFFFFF #FFF

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .blue{
            color: #4085FC;
        }
        .red{
            color: #F13F3F;
        }
        .orange{
            color: #ECBB06;
        }
        .green{
            color: #43996A;
        }
        span{
            font-size: 150px;
            font-family: "Microsoft YaHei UI Light";
            font-weight: 900;
            /*font-style: italic;倾斜*/
            font-style: normal;/*正常样式*/
        }
    </style>
</head>
<body>
    <span class="blue">G</span>
    <span class="red">o</span>
    <span class="orange">o</span>
    <span class="blue">g</span>
    <span class="green">l</span>
    <span class="red">e</span>
</body>
</html>

rgba

在rgb的基础上添加了透明度a,a的取值范围0-1。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            font-size: 150px;
            font-weight: 900;
            text-align: center;
            line-height: 300px;
            color: rgba(0,0,255,0.1);
        }
    </style>
</head>
<body>
    <p>
        hello world
    </p>
</body>
</html>

元素划分

块级元素

块儿级元素，默认宽度100%占满浏览器，支持全部的CSS样式，比如：

<p>

<div>

<h1-6>

<ul> <ol> <dl> <dt> <dd> <li>

行内元素

宽度由内容决定，所以不能进行位置，大小，边距设置，多个行内元素是居于一行的，比如：

<span>

<a>

<em> <i> <b> <u> <strong>

行内块元素

支持所有的CSS样式，但是多个行内块元素是居于一行，通常是由块儿级元素或者行内元素转换过来。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>下面是个p</p>
    <p>上面是个p</p>
    <a href="#">这是个a</a>
    <a href="#">这还是个a</a>
</body>
</html>

三种元素可以通过display方法进行转换:

参数描述
inline转换为行内元素
block转换为块儿级元素
inline-block转换为行内块儿元素
none隐藏元素

CSS大小设置

除了文字之外，其他的HTML元素都可以使用 width 和 height 进行大小设置

属性描述
width宽
height高
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            img{
                width: 800px;
                height: 800px;
            }
        </style>
    </head>
    <body>
        <img src="1.jpg">
    </body>
</html>

CSS边框与背景设置

在CSS当中可以使用backgroud对HTML元素进行背景设置，细分有以下方法：

方法描述
background背景总的方法，可以支持连写
background-color背景颜色
background-image背景图片
background-size背景大小
background-repeat重复，repeat, no-repeat, repeat-x, repeat-y
background-position背景位置
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            html,body{
                height: 100%;
                width: 100%;
            }
            body{
               background-image: url("2.jpg");
               background-size: 500px auto;
               background-repeat: no-repeat;
               background-position: center right;
                background: url("2.jpg") no-repeat 500px center ;
            }
            span,p{
                background-color: #4085FC;
            }
        </style>
    </head>
    <body>
        <span>
            hello world
        </span>
        <p>
            hello world
        </p>

    </body>
</html>

在HTML当中，任何一个元素都有边框，使用border进行设置

属性描述
border边框
border-left左边框
border-right右边框
border-top顶部边框
border-bottom底部边框
border-radius圆角
box-sizing:border-box;取消边框占位

对边框的描述有三个参数

粗细：边框线条的粗细，不占元素宽度

样式：线条颜色 虚线(dashed)，实线（solid），点状线(dotted)

颜色: 就是颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            border: 2px black solid;
            width: 500px;
            height: 600px;

            text-align: center;
            line-height: 500px;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div>
        hello world
    </div>
</body>
</html>

CSS边距

css当中有内边距（padding）和外边距(margin)，

margin 是边框距离父元素的距离

padding 是边框和内容之间的距离

padding会改变原来的边框大小

padding 和 margin都可以四个方向单独设置

方向描述
padding-left margin-left左边距
padding-right margin-right右边距
padding-top margin-top上边距
padding-bottom margin-bottom下边距

padding和margin可以支持多参数连写

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .parent{
                width: 800px;
                height: 800px;
                border: 2px black solid;
                padding: 100px; /*内边距，边框和内容之间的距离*/
            }
            .child{
                width: 200px;
                height: 200px;
                border: 100px blue solid;
                margin: 200px;*/
            }
            .child{
                width: 200px;
                height: 200px;
                border: 100px blue solid;
                margin: 200px; /*外边距距离上下左右各200*/
                margin: 200px 400px; /*外边距距离上200 左400*/
            }
        </style>
    </head>
    <body>
        <div class="parent">
            <div class="child">

            </div>
        </div>
    </body>
</html>

margin也可以用在块元素水平居中

magin: 0 auto;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .borderd{
            background-image: url("border.jpg");
            width: 179px;
            height: 320px;
            margin: 0 auto;
        }
        .borderd > img{
            margin: 8px;
            width: 165px;
            height: 255px;
        }
    </style>
</head>
<body>
    <div class="borderd">
        <img src="atm.jpg">
    </div>
    <hr>
    <div class="borderd">
        <img src="atm.jpg">
    </div>

</body>
</html>

css位置设置

文档流

HTML默认是从上到下，从左到右进行元素分布的，块儿级元素占一行，行内元素从左到右排列在一行。

浮动

浮动可以使块级元素可以从左到右进行排列，但是会脱离当前的文档流，上浮一层。

浮动采用float属性，有以下特征：

1、浮动分为left和right，注意浮动和元素的先后顺序，写在前面的元素先浮动。

2、浮动后的元素会脱离当前的文档流，所以不会占用当前文档流的高度，导致父元素闭合。

3、浮动的对象按照浮动的值进行水平排列，如果超出父元素的宽度自动折行

4、浮动之后脱离原来的文档流，如果上面有没有浮动的元素会覆盖，如果下面有没有浮动的元素会补齐，文字除外

css 位置

css位置，可以使用浮动进行设置，float:left[right],但是单纯浮动不够灵活还是需要另外技术点来确定元素的位置。这个技术点叫做定位。

在这个技术点开始之前，先看一下清除浮动和元素溢出的处理。

浮动可以实现好多布局，但是也带来了很多问题，尤其是：

1、父元素高度问题

2、换行问题

基于上述问题，在浮动之后，需要清除浮动对父元素和下面不浮动的元素带来的影响，清除浮动有以下三种方式。

1、给父元素固定高度。

2、使用overflow: hidden;属性

3、使用消除浮动的css属性 clear:both; 这个功能和上述的功能不一样，不是针对父元素，而是针对换行，浮动过程当中使用clear：both，浮动元素会换行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .parent{
            border: 1px black solid;
            /*height: 500px;  第一种清除浮动*/
            /*overflow: hidden; overflow 清除浮动*/
        }
        .parent div{
            float: left;
            width: 400px;
            height: 400px;
        }
        .c1{
            background-color: red;

        }
        .c2{
            background-color: green;
        }
        .c4{
            background-color: blue;
        }
        .c3{
            background-color: black;
            clear: both;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="c1"></div>
        <div class="c2"></div>
        <div class="c3">

        </div>
        <div class="c4" style="float: none;">

        </div>
    </div>
</body>
</html>

溢出处理

在css样式设置过程当中，经常会遇到子元素的宽高大于父元素，这个时候需要对超出的部分进行设置。

属性描述
hidden超出部分隐藏
scroll超出部分自适应,添加两个方向的滚动条
auto超出部分自适应,超出添加方向添加滚动条
visible超出部分默认
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .parent{
            width: 400px;
            height: 400px;
            border: 2px black solid;
            /*overflow: hidden;  /*超出部分隐藏*/
            overflow: scroll;  /*超出部分自适应,添加两个方向的滚动条*/
            /*overflow: auto;  /*超出部分自适应,超出添加方向添加滚动条*/
            /*overflow: visible;  /*超出部分默认*/
        }
        .c1{
            width: 500px;
            height: 300px;
            background-color: rgba(255,255,0,0.2);
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="c1"></div>
    </div>
</body>
</html>

定位

开发者可以使用position进行定位操作：

参数描述
absolute绝对定位，参照页面进行定位
relative相对定位，相对父元素
fixed固定定位，基于窗口
static静态，默认值无效果

在position的使用过程当中，必须配合方向描述定位的位置

方向翻译
top上
bottom下
left左
right右
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .parent{
                width: 500px;
                height: 500px;
                border: 1px solid black;
                margin: 100px auto;
            }
            .child{
                width: 200px;
                height: 200px;
                background-color: green;
                /*position: absolute;*/
                /*position: relative;*/
                /*position: fixed;*/
                /*position: static;*/
                position: absolute;
                bottom: 100px;
                right: 500px;

            }
        </style>
    </head>
    <body>
        <div class="parent">
            <div class="child">

            </div>
        </div>
        <div class="parent">
            <div class="child">

            </div>
        </div>
        <div class="parent">
            <div class="child">

            </div>
        </div>
        <div class="parent">
            <div class="child">

            </div>
        </div>

    </body>
</html>

最后

以上就是开朗菠萝为你收集整理的HTML中的CSSCSS的全部内容，希望文章能够帮你解决HTML中的CSSCSS所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
点赞(45)

相关文章

html css js大小写敏感的问题
html css js大小写敏感的问题
HTML中的CSS是什么百度百科,css框架
HTML中的CSS是什么百度百科,css框架
HTML的基本标签
HTML的基本标签
html笔记_html
html笔记_html
HTML中的CSSCSS
HTML中的CSSCSS
JavaScript 方法、变量区分大小写
JavaScript 方法、变量区分大小写
HTML5标签
HTML5标签
深入了解W3C标准及规范
深入了解W3C标准及规范

评论列表共有 0 条评论

立即
投稿
返回
顶部