4、常用属性

CSS有129个属性,每一个属性的详细链接可以参照网址:CSS 参考 – CSS 的免费视觉指南 (cssreference.io)。我们在入门学习阶段无法记住所有的属性,常用的属性可以分为字体属性、文本属性、表格属性、背景属性等。

(1)字体属性

字体属性包括颜色、字号、字体、粗体等。

颜色使用color属性,属性值可以是颜色名、16进制颜色代码(示例蓝色:#0000ff)或RGB样式(示例蓝色:rgba(0,0,255,0.5),其中a表示透明度)。

文本大小使用font-size属性,很多浏览器的最小字体有阈值。

文本粗细使用font-weight属性,属性值包括:normal、bold、lighter或100-900具体值,其中400等于默认,700等于粗体。

文本样式使用font-style 属性,常用属性是normal与斜体(italic)。

字体使用font-famliy属性,VS Code中会自动提供属性值。

(2)背景属性

实际中最常使用的属性包括:background-color(背景色)、background-image(背景图)、background-position(背景显示位置)、background-repeat(背景填充方式)、background-size(背景大小属性)。

background-size属性可以设置背景图像的大小,常用属性设置包括:具体数值填充长宽,百分比填充,cover(充满整个容器,横纵比例不变,但图片可能会显示不全),contain(图片纵横比不变,将图像缩放到最大且图片内容全部显示)。

background-position使用三种属性值方式,包括:描述性(left、right、top、bottom、center)、XY轴(x% y%)、具体像素值位置(xpos ypos)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 为容器1设置长宽和颜色 */
        .box1{
            width500px;
            height500px;
            background-color: gold;
        }
        /* 显示图片,这里路径要使用左斜杠 */
        .box2{
            width1000px;
            height1000px;
            background-imageurl("./子集图片/子集.png");
            /* 使用repeat同时设置水平和垂直方向重复 */
            background-repeat: repeat-x repeat-y;
        }
        /* 使用size实现拉伸 */
        .box3{
            width400px;
            height200px;
            background-imageurl("./子集图片/子集.png");
            background-repeat: no-repeat;
            background-size: contain;
        }
    
</style>
</head>
<body>
    
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

(3)文本属性

使用text-align属性设置文本对齐方式,常用属性值为:left、right、center。常用于设置标题、文本等。

使用text-decoration属性进行文本的修饰,常用的添加上划线:overline,下划线:underline,删除线:line-through。

使用text-transform控制文本大小写,常用的是:captialize单词首字母大写、uppercase全部大写、lowercase全部小写。

text-indent首行文本缩进,参数可以是具体值,负值表示左缩进,正值右缩进。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1{
            text-align: center;
            text-decoration: underline;
        }
        p{
            font-size50px;
            text-transform: capitalize;
            text-indent100px;
        }
    
</style>
</head>
<body>
    <h1>演示标题</h1>
    <p>hellow world</p>
</body>
</html>

(4)表格属性

HTML可以建立表格,但是更需要CSS进行修饰。表格边框可以直接使用border属性。使用border-collapse折叠边框为单边框。表格宽度和高度可以使用width和height设置。使用text-align设置水平居左、中、右。使用vertical-align设置垂直居上、中、下。使用padding设置单元格的文本填充的间隙。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
     <style>
        table,td{
            width400px;
            height100px;
            /* solid为实线*/
            border1px solid red;
            /* 折叠为单边框 */
            border-collapse: collapse;
            /* 设置水平居中 垂直居下 */
            text-align: center;
            vertical-align: bottom;
        }
        .data9{
            padding15px;
            background-color: lawngreen;
        }
     
</style>

</head>
<body>
    
     <table>
        <tr>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>data</td>
            <td>data</td>
            <td class="data9">data</td>
        </tr>
     </table>
</body>
</html>

css首行缩进_缩进字符在哪里设置_首行缩进css

5、关系选择器

除了基础选择器关系选择器分为后代选择器、子代选择器、相邻兄弟选择器、通用兄弟选择器。

后代选择器:使用父代 子代{}的格式,包括子代、孙子代等。

子代选择器:只针对子代,使用父代>子代{}格式。

相邻兄弟选择器:标签1+标签2格式,和标签1向下相邻的第一个标签2生效

通用兄弟选择器:标签1~标签2格式,和标签1向下相邻的所有标签2生效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 相邻兄弟 */
        h1+p{
            color: red;
        }
        /* 通用 */
        h2~p{
            color: green;
        }
        /* 后代选择器,ul下面的li都是ul的子代 */
        ul li{
            color: blue;
        }
        /* 子代选择器 */
        ul>li{
            font-size30px;
        }
    
</style>
</head>
<body>
    
     <h1>第一级大标题</h1>
     <p>一级内容1</p>
     <p>一级内容2</p>
     <h2>二级标题</h2>
     <p>二级内容1</p>
     <p>二级内容2</p>
    
    <ul>
        <li>list1</li>
        <li>list2</li>
        <li>list3</li>
        <ol>
            <li>4</li>
            <li>5</li>
        </ol>
    </ul>

</body>
</html>

首行缩进css_缩进字符在哪里设置_css首行缩进

6、Box Model

HTML所有的元素都可以看作是盒子,而CSS盒模型本质是一个盒子,来封装HTML元素。盒子类型包括标准盒模型、怪异盒模型;或者分为区块盒子block boxes和行内盒子inline boxes。

(1)盒子模型属性

盒子属性包括外边距margin(margin-top等四方向)、边框border、内边距 padding(padding-left等)、实际内容 content(实际通过设置宽高实现)、轮廓outline等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            /* 使用宽高实现content */
            width400px;
            height300px;
            background-color: aqua;
            /* 内边距,上下填充20、左右填充10px */
            /* 一个值就上下左右同时填充该值 */
            padding20px 10px;
            /* 边框 粗细、虚线线型、颜色 */
            border5px dashed blue;
            /* 外边距 */
            margin50px 20px;
            /* 轮廓,要先定义线型 */
            outline: solid;
            outline-color: red;
            outline-width4px;
        }
    
</style>
</head>
<body>
    <div>
        <p>盒子内容文本</p>
    </div>
</body>
</html>

(2)弹性盒子模型flex box

flex box是为了更好的布局提供的新的盒子模型,其由弹性容器(Flex container)和弹性子元素(Flex item)构成,主要是用过display属性将flex定义为弹性容器,容器内可以包含一个或多个弹性子元素。但是,弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

在容器上使用的属性主要有: display: flex、 flex-direction:、justify-content:、align-items:,分别是设置为弹性盒子、摆放方向、垂直摆放的位置、水平摆放的位置。

在子元素上最常使用的属性只有flex-grow或者flex,用于指定弹性子元素如何分配空间,使用比例等参数。其他常用的几个属性还有:order 属性设置弹性容器内某一个子元素相对于其他子元素的顺序;align-self 会对齐当前 grid 或 flex 行中的元素,并覆盖已有的 align-items 的设置; margin设置子元素周围的空隙值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            /* 使用display设置开启弹性盒子 */
            display: flex;
            /* 设置子元素的方向为纵向*/
            flex-direction: column;
            /* 设置垂直方向摆放方式 */
            justify-content: center;
            /* 设置水平方向摆放方式 */
            align-items: center;
            width500px;
            height500px;
            background-color#555;
        }
        .box1{
                width100px;
                height100px;
                background-color: red;
                /* flex会使前面设置的长宽失效,其优先级更高 */
                flex:2;
        }
        .box2{
                width100px;
                height100px;
                background-color: green;
                flex2;
                /* 设置相对其他的顺序*/
                order:1;
                /* align-self */
                align-self:flex-end;
        }
        .box3{
                width100px;
                height100px;
                background-color: blue;
                flex1;
                margin2%;
        }
    
</style>
</head>
<body>
    
    <div class="container">
        <div class="box1"><P>Text1</P></div>
        <div class="box2"><P>Text2</P></div>
        <div class="box3"><P>Text3</P></div>
    </div>
</body>
</html>

缩进字符在哪里设置_css首行缩进_首行缩进css

限时特惠:本站每日持续更新海内外内部创业教程,一年会员只需88元,全站资源免费下载点击查看详情
站长微信:nnxmw123