web前端基础—css_02

最新推荐文章于 2024-07-18 15:48:23 发布

Top Secret

最新推荐文章于 2024-07-18 15:48:23 发布

阅读量251

点赞数

分类专栏：前端基础文章标签：前端 css html

本文链接：https://blog.csdn.net/m0_55196097/article/details/122455958

版权

前端基础专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1. 字体,边框,文本，背景属性

1.font-size:设置字体尺寸,字体大小。

例(常用)：font-size:14px;

2.font-family:设置文本的字体名称序列，一般字体引用可以不加引号，如果字体名包含了空格、数字或者符号（如连接符）则需加上引号，避免引发错误。

            例(常用)：font-family:Arial;字体不加双引号

3.font-style：设置或检索对象中的文本字体样式

（1.）normal指定文本字体样式为正常的字体。

例：font-style:normal;

（2.）italic指定文本字体样式为斜体。

例：font-style:italic;

（3.）oblique指定文本字体样式为倾斜的字体。

例：font-style:oblique;

4. font-weight：设置文本字体的粗细

（1.）normal:正常的字体，相当于数字值400。

例：font-weight:normal;

（2.）bold:粗体，相当于数字值700。

例：font-weight:bold;

（3.）bolder:定义比继承值更重的值。

例：font-weight:bolder;

(4.)lighter:定义比继承值更轻的值。

例：font-weight:lighter;

< lighter >:用数字表示文本字体粗细。取值范围：100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

例：font-weight:700;

5.font-variant:设置文本是否为小型的大写字母

取值：

normal:正常的字体

small-caps:小型的大写字母字体

2. CSS文本属性

text-indent: 首行缩进：text-indent:30px;

*text-align: 文本的位置：left center right

*text-decoration: 字体画线：none无、underline下画线，line-through贯穿线

*text-shadow: 文本的文字是否有阴影及模糊效果水平px 垂直px 阴影距离px 颜色（-左上 +右下）

direction：文字流方向。ltr | rtl

*letter-spacing: 文字或字母的间距

word-spacing：单词间距

*line-height：行高 div（height=200） line-height=200 文字水平居中

*color：字体颜色

<meta charset="UTF-8">
    <title>首页</title>
    <style>
        span{display: block;
        text-indent: 30px;}   CSS属性的添加位置
    </style>
</head>
<body>
<span style="font-size: 25px;font-family:Arial;">首页</span>
<span style="font-size: 25px;font-family:Arial;">首页</span>
<span style="font-size: 25px;font-family:Arial;">首页</span>
</body>
</html>

3. CSS边框属性

1.border: 复合属性,设置对象边框的特性, 如使用该复合属性定义其单个参数，则其他参数的默认值将无条件覆盖各自对应的单个属性设置

例：border:1px solid red;

设置或检索对象边框宽度。

设置或检索对象边框样式。

设置或检索对象边框颜色

2.border-color: 设置或检索对象的边框颜色。

如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。

border-color: pink red green orange;
如果只提供一个，将用于全部的四边。

如果提供两个，第一个用于上、下，第二个用于左、右。

border-color: pink green;
如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。

3.border-style:设置或检索对象的边框样式。

如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。

如果只提供一个，将用于全部的四边。

如果提供两个，第一个用于上、下，第二个用于左、右。

如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。

取值：

dotted:点状轮廓。

dashed:虚线轮廓。

solid:实线轮廓。

double:双线轮廓。两条单线与其间隔的和等于指定的border-width值

groove:3D凹槽轮廓。

ridge:3D凸槽轮廓。

inset:3D凹边轮廓。

outset:3D凸边轮廓。

4.border-width:设置或检索对象的边框宽度

如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。

如果只提供一个，将用于全部的四边。

如果提供两个，第一个用于上、下，第二个用于左、右。

如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。

如下一个利用标签选择器设计的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <style>
        span{
            display: block;
            text-indent:30px;
            text-align:center;
            text-decoration:line-through green;
            text-shadow: -15px -15px 15px orange;
            letter-spacing:225px;
            color:yellowgreen;
            border:6px solid red;
            border-color: pink red green orange;
            border-style: groove;
            border-width:12px 20px;

        }
    </style>
</head>
<body>

<span style="font-size: 40px;font-family:Arial;font-style:italic;font-weight:bold;">首页</span>
<span style="font-size: 40px;font-family:Arial;font-style:italic;font-weight:bold;">首页</span>
<span style="font-size: 40px;font-family:Arial;font-style:italic;font-weight:bold;">首页</span>
<span style="font-size: 40px;font-family:Arial;font-style:italic;font-weight:bold;">首页</span>
<span style="font-size: 40px;font-family:Arial;font-style:italic;font-weight:bold;">首页</span>
<span style="font-size: 40px;font-family:Arial;font-style:italic;font-weight:bold;">首页</span>
<span style="font-size: 40px;font-family:Arial;font-style:italic;font-weight:bold;">首页</span>
<span style="font-size: 40px;font-family:Arial;font-style:italic;font-weight:bold;">首页</span>
</body>
</html>

4. CSS定位属性

*position:

定位方式：absolute(绝对定位)、fixed(固定)（relative定位参考，可对内部相对absolute定位）

绝对定位： 一个屋子里的桌子上的水杯所在的位置（不会随着页面大小改变而改变）相对于网页的位置不会发生改变

示例演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
 <title>定位（绝对位置）</title>
    <style>
        #box{
            width: 500px;
            height: 500px;
            top: 300px;
            left: 400px;
            position: absolute;
            background-color: #00a2ca;
        }
    </style>
</head>
<body>
<div id ="box">  绝对定位只相对于一个盒子而言
    <div id = "box2">11111</div>
    <div id = "box3">11222</div>
</div>
</body>
</html>

相对定位：

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
 <title>定位（相对位置）</title>
<style>
        #box{
            width: 500px;
            height: 500px;
            top: 300px;
            left: 400px;
            position: absolute;
            background-color: #00a2ca;
        }
        #box2,#box3{
            width: 10px;
            height: 100px;
            top: 200px;
            left: 200px;
            position: relative;
            background-color: red;
        }
    </style>
</head>
<body>
<div id ="box">
    <div id = "box2">11111</div>
    <div id = "box3">11222</div>
</div>

*z-index:

层叠顺序，值越大越在上方。

*top: 检索或设置对象与其最近一个定位的父对象顶部相关的位置

right: 检索或设置对象与其最近一个定位的父对象右边相关的位置

bottom: 检索或设置对象与其最近一个定位的父对象下边相关的位置

*left: 检索或设置对象与其最近一个定位的父对象左边相关的位置

5. 盒子模型

5.1.*内补白（内补丁）内边距

padding：检索或设置对象四边的内部边距,如padding:10px; padding:5px 10px;

padding-top：检索或设置对象顶边的内部边距

padding-right：检索或设置对象右边的内部边距

padding-bottom：检索或设置对象下边的内部边距

padding-left：检索或设置对象左边的内部边距

<title>内边距</title>
    <style>
        #box{
            width: 500px;
            height: 500px;
            background-color: #0095bb;
        }
        ul{
            width: 400px;
            height: 400px;
            background-color: red;
            border: 5px solid green;
            padding-top: 20px;
        }
        ul li{
            width: 100px;
            height: 50px;
            background-color: pink;
            border: 5px solid red;
        }
    </style>
</head>
<body>
<div id = "box">
    <ul>
        <li>1111</li>
        <li>2222</li>
        <li>3333</li>
        <li>4444</li>
    </ul></div>
</body>
</html

要使粉框间距改变，需要设置margin

5.2. *外补白（外补丁）外边距

margin：检索或设置对象四边的外延边距,如 margin:10px; margin:5px auto;

margin-top：检索或设置对象顶边的外延边距

margin-right：检索或设置对象右边的外延边距

margin-bottom：检索或设置对象下边的外延边距

margin-left：检索或设置对象左边的外延边距

居中：

margin: 15px auto;居中

5.3 解决爆盒子问题：

右边width与height的参数会存在爆盒子问题

如果爆盒子，用一下语句实现滚动条操作

6.CSS伪类元素

a:link{    
       color:red;/*未访问的链接*/
}
             

a:hover{
       color:green;/*鼠标滑过链接*/
}


a:active{
       color:pink;/*鼠标点击的效果*/
}


a:visited{
       color:blue;/*访问过的链接*/
}

Top Secret

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
web前端基础—css_02

目录1. 字体,边框,文本，背景属性2. CSS文本属性3. CSS边框属性4. CSS定位属性5. 盒子模型5.1.*内补白（内补丁）内边距 5.2. *外补白（外补丁）外边距5.3 解决爆盒子问题：6.CSS伪类元素1. 字体,边框,文本，背景属性1.font-size:设置字体尺寸,字体大小。例(常用)：font-size:14px;2.font-family:设置文本的字体名称序列，一般字体引用可以不加引号，如果字体名包含了空格、数字或者符..
复制链接

扫一扫