CSS基础（2）

最新推荐文章于 2025-12-09 13:48:31 发布

原创最新推荐文章于 2025-12-09 13:48:31 发布 · 193 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #html5

CSS基础专栏收录该内容

4 篇文章

订阅专栏

1.CSS字体属性

color：颜色单词/颜色码---设置字体颜色

font-family：具体字体的名称--指定一个元素的字体

font-size：数字px--用于设置字体大小

font-style：normal /italic / oblique---指定文本的字体样式

一些不常用的字体，或许就只有个正常体，如果你用italic，就没有效果了。这时候你就要用oblique，可以理解成italic是使用文字的斜体，oblique是让没有斜体属性的文字倾斜

font-weight：normal /lighter /bold整百的数字【100-900】设置文本的粗细

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>css字体属性设置</title>
        <style>

            #p1{
                color: aquamarine;
                font-family: '楷体';
                font-size: 30px;
                font-style: normal;
                font-weight: 900;
            }
        </style>
    </head>
    <body>
        <h4>css字体属性设置</h4>
        <h5>color：颜色单词/颜色码--设置字体颜色</h5>
        <h5>font-family:具体字体的名称---指定一个元素的字体</h5>
        <h5>ont-size:数字px----用于设置字体大小</h5>
        <h5>font-style:normal/italic/oblique----指定文本的字体样式</h5>
        <h5>一些不常用的字体，或许就只有个正常体，如果你用 italic，就没有效果了。<br>
            这时候你就要用 oblique，可以理解成 italic 是使用文字的斜体，oblique 
            是让没有斜体属性的文字倾斜
                </h5>
        <h5>font-weight:normal / lighter / bold /整百的数字【100--900】 设置文本的粗细</h5>
                <p id="p1">测试字体属性设置</p>
    </body>
</html>

2.链接样式

链接的样式，可以用任何css属性（如颜色，字体，背景等）

四个链接状态：

a：link--正常，为访问过的链接

a：visited--用户已访问过的链接

a:hover--当用户鼠标放在连接上时

a：active--链接被点击的那一刻

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>链接样式</title>
        <style>
            a:link{
                color: aquamarine;
                font-size: 30px;
                text-decoration: none;
            }
            a:visited{
                color:	#FFA07A;
                font-size: 30px;
                text-decoration: none;
            }
            a:hover{
                color: brown;
                font-size: 30px;
                text-decoration: none;
            }
            a:active{
                color:cornflowerblue;
                font-size: 30px;
                text-decoration: none;
            }
            
        </style>
    </head>
    <body>     
        <h4>a:link - 正常，未访问过的链接</h4> 
        <h4>a:visited - 用户已访问过的链接</h4>
        <h4>a:hover - 当用户鼠标放在链接上时</h4>
        <h4>a:active - 链接被点击的那一刻</h4>
        <a href="#">测试连接的基本设置</a>
    </body>
</html>

3.css列表属性

list-style-image:url("")---使用图像来替换列表项的标记。

list-style-type: [disc/square/circle/decimal/lower-roman/upper-roman/lower-alpha/upper-alpha]

设置列表标记的类型。

list-style-position:inside/outside---指示如何相对于对象的内容绘制列表项标记

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>列表样式</title>
        <style>
            ul{
                list-style-image: url(img/微信截图_20210916152812.png);
                width: 15%;
                list-style-position: outside;
            }
            ul li{
                border: 1px solid black;
            }
            
        </style>
    </head>
    <body>     
        
        <ul>
            <li>班级</li>
            <li>姓名</li>
            <li>年龄</li>
        </ul>
    </body>
</html>

4.css表格属性

boder属性：设置表格边框

border-collapse:collapse/separate属性设置表格的边框是否被折叠成一个单一的边框或隔开

width和height属性定义表格的宽度和高度

text-align属性设置水平对齐方式，向左，右，或中心

vertical-align属性设置垂直对齐方式，顶部，底部或中间

padding控制边框和表格内容之间的间距，应使用td和th元素

background-color设置背景颜色

background-image设置背景图片

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>表格样式</title>
        <style>
            
            table,tr,td{
                border: 1px solid black;
                vertical-align: bottom;
                padding: 20px;
            }
            table{
                border-collapse: collapse;
                width: 300px;
                height: 200px;
                text-align: center;
                vertical-align: bottom;
                background-color: cornflowerblue;
            }
            #th{
                background-color: cyan;
            }
            
        </style>
    </head>
    <body>     
        <h3>border属性--设置表格边框 solid实线</h3>
        <h3>border-collapse：collapse/separ属性设置表格边框是否被折叠成一个单一的边框或者隔开</h3>
        <h3>width和height属性定义表格的宽度和高度</h3>
        <h3>text-align属性设置水平对齐方式，向左，右，或中心</h3>
        <h3>vertical-algin属性设置垂直对齐方式，顶部，底部或中间</h3>
        <h3>padding控制边框和表格内容之间的间距，应使用td和th元素</h3>
        <h3>background-color设置背景颜色</h3>
        <h3>>background-image设置背景图片</h3>
        <table> 

            <tr>
                <td>芜湖</td>
                <td>起飞</td>
                <td>~~~</td>
            </tr>
            <tr>
                <td>芜湖</td>
                <td>起飞</td>
                <td>~~~</td>
            </tr>
            <tr>
                <td>芜湖</td>
                <td>起飞</td>
                <td id="th">~~~</td>
            </tr>
        </table>
       
    </body>
</html>

5.css边框属性

border:border-width粗细 border-style样式，border-color颜色。设置四边的边框样式

单独设置某一边的边框样式：border-top/border-right/border-bottom/border-left

例如：border-top：粗细样式颜色

设置4边边框不同的样式:

border-top-color，border-right-color，border-bottom-color，border-left-color

border-top-style，border-right-style，border-bottom-style，border-left-style

border-top-width，border-right-width，border-bottom-width，border-left-width

border-style: solid double dashed[块状虚线] dotted[点状虚线]

例如：

6.css尺寸（Dimension）

CSS尺寸属性允许你控制元素的高度和宽度。同样，他允许你增加行间距

width属性设置元素的宽度

height属性设置元素的高度

line-height属性设置行高

7.css.Display（显示）与Visibility（可见性）

display属性设置一个元素应如何显示

none--设置元素隐藏，清楚当前元素所占用物理空间

block--设置元素显示，当前元素变成块级元素

visibility属性指定一个元素应可见还是隐藏

hidden--设置元素隐藏，不会清楚当前元素所占用的物理空间

show--设置元素显示

例如：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>元素的隐藏/显示设置</title>
    <style>
        #img1 {
            display:block;
        }
        #img2{
            visibility: hidden;
        }
    </style>
</head>

<body>
    <h4>display属性设置一个元素应如何显示</h4>
    <h5>none--设置隐藏，清除当前元素占用的物理空间</h5>
    <h5>block--设置元素显示，当前元素变成块级元素</h5>
    <span>图片之前</span><img id="img1" src="img/微信截图_20210916152812.png"><span>图片之后</span>
    <h4>visibilty属性指定一个元素应可见还是隐藏</h4>
    <h5>hidden--设置元素隐藏，不会清除当前元素所占用的物理空间</h5>
    <h5>show--设置元素显示</h5>
    <span>图片之前</span><img id="img2" src="img/微信截图_20210916152812.png" > <span>图片之后</span>
</body>

</html>

8.css盒子模型

在html中，所有HTML元素都可以被看作为一个盒子

被看作为壳子的HTML元素由外边距，内边距，内容

计算html元素的宽度==左右外边距+左右边框+左右内边距+内容宽度

计算html元素的高度==上下外边距+上下边框+上下内边距+内容高度

例如：

div {

background-color: lightgrey;

width: 300px;

border: 25px solid green;

padding: 25px;

margin: 25px;

}

元素的宽度内容为300px，其中margin：25px设置外边距，border：25px solid green设置边框，

padding：25px设置内边框

div的总宽度300px（宽）+50px（左+右填充）+50px（左+右边框）+50px（左+右边距）=450px

9.CSS maring（外边距）

maring 可以单独改变元素的上，下，左，右边距，也可以一次性改变所有的属性

maring 可以使用负值，重叠内容

一次改变所有的外边距

maring：1个数据值【4边都一样】

2和数据值【第一个控制上下，第二个控制左右】

3个数据值【第一个控制上，第二个控制左右，第三个控制下】

4个数据值【上，右，下，左】

maring-top[上]margin-left[左] margin-right[右] margin-bottom[下]

例如：

10 CSS padding（填充）

padding 可以单独改变元素的上，下，左，右外边距，也可以一次性改变所有属性。

一次改变所有的外边距

padding：1个数据值【4边都一样】

2个数据值【第一个值控制上下，第二个值控制左右】

3个数据值【第一个值控制上，第二个值控制左右，第三个值控制下】

4个数据值【上,右,下,左】

padding-top[上] padding-left[左] padding-right[右] padding-bottom[下]

例如：

<!DOCTYPE html>
<html>
    <head>
        <title>
            内边距（填充）
        </title>
        <meta charset="utf-8"> 
        <style>
             div{
                 width: 300px;
                 height: 300px;
                 border: 5px solid red;
                 background: red;
                 padding-top: 50px;
             }
             div img{
                 border: 5px solid greenyellow;
             }
     
        </style>
    </head>
    <body>
        <div>
            <img src="img/avatar5.png" >
        </div>
    </body>
</html>