CSS设置文本字体，链接，背景等

最新推荐文章于 2023-05-19 13:00:31 发布

H之一

最新推荐文章于 2023-05-19 13:00:31 发布

阅读量610

点赞数 1

分类专栏：前端 css HTML 文章标签： css

本文链接：https://blog.csdn.net/H_zhiyi/article/details/108802084

版权

前端同时被 3 个专栏收录

39 篇文章 0 订阅

订阅专栏

HTML

11 篇文章 1 订阅

订阅专栏

css

8 篇文章 0 订阅

订阅专栏

一、CSS基础样式
1.CSS文本及字体设计
常用的应用文本的CSS样式

设置文字的颜色	color:red;
设置文字的大小	font-size:12px;
设置文字的字体	font-family:‘微软雅黑’;
设置字体不倾斜	font-style:‘normal’;
设置字体倾斜	font-style:‘italic’;
设置文字是否加粗	font-weight:bold; font-weight:normal
设置文字的行高	line-height:24px;
设置文字的下划线	text-decoration
设置文字首行缩进	text-indent:
设置文字水平对齐方式	text-align:center:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .continer{
                width: 300px;
                height: 300px;
                /*设置边框*/
                border: 1px solid red;
                /*设置文本*/
                /*font: normal 20px/30px "仿宋";*/
                font-family: "仿宋";
                font-size: 20px;
                /*设置字体是否加粗*/
                font-weight: normal;
                /*设置行高(每一行的高度都为50px)*/
                /*line-height: 50px;*/
                /*如果只有一行内容,则可设置垂直居中 显示 且高度和元素高度一致*/
                /*line-height: 300px;*/
                /*设置元素水平居中显示*/
                /*text-align: center;*/
                /*设置文本颜色*/
                color: orange;
                /*设置文本缩进*/
                /*text-indent: 50px;*/
            }
            a{
                /*设置文本的上下划线是否显示  以下设置不显示*/
                text-decoration: none;
            }
        </style>
    </head>
    <body>
        <div class="continer">
            学的不仅是技术更是<a href="#">梦想</a>
        </div>
    </body>
</html>

2.背景的设计

设置背景颜色	background-color
设置背景图片地址	background-image
设置背景图片如何重复平铺	background-repeat
设置背景图片的位置	background-position
设置背景图片是固定还是随着页面滚动条滚动	background-attachment

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>实例代码_02</title>
        <style type="text/css">
            .continer{
                width: 1000px;
                height: 600px;
                border: 2px solid black;
                /*1、“background:url(bg.jpg)”，默认设置一个图片地址，图片会从盒子的左上角开始将盒子铺满。*/
                /*background: url(../img/logo1.png);*/
                /*2、“background:cyan url(bg.jpg) repeat-x”，横向平铺盒子，盒子其他部分显示背景颜色“cyan”。*/
                /*background:cyan url(../img/logo1.png) repeat-x;*/
                /*3、“background:cyan url(bg.jpg) repeat-y”，纵向平铺盒子，盒子其他部分显示背景颜色“cyan”。*/
                /*background:cyan url(../img/logo1.png) repeat-y;*/
                /*4、“background:cyan url(bg.jpg) no-repeat”，背景不重复，背景和盒子左上角对齐，盒子其他部分显示背景颜色“cyan”。*/
                /*background:cyan url(../img/logo1.png) no-repeat;*/
                /*5、“background:cyan url(bg.jpg) no-repeat left center”，背景不重复，背景和盒子左中对齐，盒子其他部分显示背景颜色“cyan”。*/
                /*background:cyan url(../img/logo1.png) no-repeat left center;*/
                /*6、“background:cyan url(bg.jpg) no-repeat right center”，背景不重复，背景和盒子右中对齐，也就是背景图片的右边对齐盒子的右边，盒子其他部分显示背景颜色“cyan”。*/
                background:cyan url(../img/logo1.png) no-repeat right center;
            }
        </style>
    </head>
    <body>
        <div class="continer"></div>
    </body>
</html>

3.颜色的三种表示方式
（1）颜色名表示，比如：red 红色，gold 金色
（2）rgb 表示，比如：rgb(255,0,0)表示红色
（3）16 进制数值表示，比如：#ff0000 表示红色，这种可以简写成 #f00
4.表格的样式

简写属性	list-style
将图象设置为列表项标志。	list-style-image
设置列表中列表项标志的位置。	list-style-position
设置列表项标志的类型。	list-style-type

5.CSS的轮廓（扩展）

在一个声明中设置所有的轮廓属性。	outline
设置轮廓的颜色。	outline-color
设置轮廓的样式。	outline-style
–	–
设置轮廓的宽度。	outline-width

6.CSS选择器的介绍及使用
（1）标签选择器

*{margin:0;padding:0} div{color:red}
<div>....</div> <!-- 对应以上两条样式 -->
<div class="box">....</div> <!-- 对应以上两条样式 -->

（2）id选择器

#box{color:red}
<div id="box">....</div>    <!-- 对应以上一条样式，其它元素不允许应用此样式 -->

（3）类选择器

.red{color:red}
.big{font-size:20px}
.mt10{margin-top:10px}
<div class="red">   </div>
<h1 class="red big mt10">   </h1>
<p class="red mt10">    </p>

（4）层级选择器

.box span{color:red}
.box .red{color:pink}
.red{color:red}
<div class="box">
<span>  </span>
<a href="#" class="red">    </a>
</div>
<h3 class="red">    </h3>

（5）组选择器

.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold}
<div class="box1">  </div>
<div class="box2">  </div>
<div class="box3">  </div>

（6）伪类及伪元素选择器

.box1:hover{color:red}
.box2:before{content:'行首文字';}
.box3:after{content:'行尾文字';}
<div class="box1">  </div>
<div class="box2">  </div>
<div class="box3">  </div>

二、CSS的盒子模型介绍及使用
把元素叫做盒子，设置对应的样式分别为：
盒子的边框(border)、盒子内的内容和边框之间的间距(padding)、盒子与盒子之间的间距(margin)。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>英莱特科技</title>

        <style type="text/css">

            .continer{

                width: 200px;

                height: 200px;

                background: pink;

                margin: 100px auto;

                border: 10px solid black;

                padding: 20px;

            }

        </style>

    </head>

    <body>

        <div class="continer"></div>

    </body>

</html>

2．设置边框
设置一边的边框，比如顶部边框，可以按如下设置：

border-top-color:red;/* 设置顶部边框颜色为红色 */

border-top-width:10px;  /* 设置顶部边框粗细为 10px */

border-top-style:solid; /* 设置顶部边框的线性为实线，常用的有：solid(实线)

dashed(虚线) dotted(点线); */

上面三句可以简写成一句：

 border-top:10px solid red;

设置其它三个边的方法和上面一样，把上面的’top’换成’left’就是设置左边，换成’right’就是设置右边，换成’bottom’就是设置底边。

四个边如果设置一样，可以将四个边的设置合并成一句：

border:10px solid red;

3．设置内间距 padding
设置盒子四边的内间距，可设置如下：

padding-top：20px;/* 设置顶部内间距 20px */

padding-left:30px;/* 设置左边内间距 30px */

padding-right:40px;/* 设置右边内间距 40px */

padding-bottom:50px;    /* 设置底部内间距 50px */

上面的设置可以简写如下：

padding：20px 40px 50px 30px; /* 四个值按照顺时针方向，分别设置的是 上 右 下 左

四个方向的内边距值。 */

padding 后面还可以跟 3 个值，2 个值和 1 个值，它们分别设置的项目如下：

padding：20px 40px 50px; /* 设置顶部内边距为 20px，左右内边距为 40px，底部内边距为 50px

*/

padding：20px 40px; /* 设置上下内边距为 20px，左右内边距为 40px*/ padding： 20px; /* 设置四边内边距为 20px */

### 4．设置外间距 margin

外边距的设置方法和 padding的设置方法相同，将上面设置项中的

'padding’换成’margin’就是外边距设置方法盒子模型的尺寸

按照下面代码制作页面：

实例代码_07:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            .box01{

                width: 50px;

                height: 50px;

                background-color: gold;

            }

            .box02 {

                width: 50px;

                height: 50px;

                background-color: gold;

                border: 50px solid #000

             }

            .box03 {

                width: 50px;

                height: 50px;

                background-color: gold;

                border: 50px solid #000;

                padding: 50px;

             }

        </style>

    </head>

    <body>

        <div class="box01">1</div>

        <br />

        <div class="box02">2</div>

        <br />

        <div class="box03">3</div>

    </body>

</html>

通过上面的页面得出结论：盒子的 width 和height 设置的是盒子内容的宽和高，不是盒子本身的宽和高，盒子的真实尺寸计算公式如下：
思考题：
1.在布局中，如果我想增大内容和边框的距离，又不想改变盒子显示的尺寸，应该怎么做？
### 5．margin 相关技巧

设置元素水平居中: margin:x auto;
margin 负值使元素位置及边框合并
.margin-top 塌陷
在两个盒子嵌套时候，内部的盒子设置的margin-top 会加到外边的盒子上，导致内部的盒子 margin-top 设置失败，解决方法如下：
1、外部盒子设置一个边框
2、外部盒子设置overflow:hidden
3、使用伪元素类：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>实例代码_09</title>

        <style type="text/css">

            .continer{

                width: 400px;

                height: 400px;

                background-color: deepskyblue;

                /*解决方式:*/

                /*(1)给父元素设置overflow:hidden*/;

                /*overflow:hidden;*/

                /*(2)给父元素添加边框属性*/

                /*border: 1px solid black;*/                

            }

            /*(3)使用伪类元素 解决*/

            .continer:before{

                content: '';

                display: table;

            }

            .iner{

                width: 200px;

                height: 200px;

                background-color: pink;

                /*产生margin-top塌陷问题*/

                margin-top: 100px;

            }

        </style>

    </head>

    <body>

        <div class="continer">

            <div class="iner"></div>

        </div>

    </body>

</html>

二、CSS 元素溢出
当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过 overflow 属性来设置。
overflow 属性介绍：
1、visible 默认值。内容不会被修剪，会呈现在元素框之外。

2、hidden 内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top 塌陷的功能。

3、scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

4、auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

5、inherit 规定应该从父元素继承 overflow 属性的值。
三、块元素、内联元素、内联块元素
**1．**块元素

块元素，也可以称为行元素，布局中常用的标签如：div、p、ul、li、h1~h6、dl、

dt、dd 等等都是块元素，它在布局中的行为：

支持全部的样式

如果没有设置宽度，默认的宽度为父级宽度 100% 盒子占据一行、即使设置了宽度同样也是父级宽度100%。
**2．**内联元素

内联元素，也可以称为行内元素，布局中常用的标签如：a、span、em、b、strong、

i 等等都是内联元素，它们在布局中的行为：

支持部分样式（不支持宽、高、margin上下、padding 上下）

宽高由内容决定

盒子并在一行

代码换行，盒子之间会产生间距

子元素是内联元素，父元素可以用text-align 属性设置子元素水平对齐方式，用line-height 属性值设置垂直对齐方式

解决内联元素间隙的方法

1、去掉内联元素之间的换行

2、将内联元素的父级设置 font-size 为 0，内联元素自身再设置 font-size
display 属性

display 属性是用来设置元素的类型及隐藏的，常用的属性有：

1、none 元素隐藏且不占位置

2、block 元素以块元素显示

3、inline 元素以内联元素显示

4、inline-block 元素以内联块元素显示
四、浮动特性

1、浮动元素有左浮动(float:left)和右浮动(float:right)两种
清除浮动
父级上增加属性 overflow：hidden

在最后一个子元素的后面加一个空的 div，给它样式属性 clear:both（不推荐）

使用成熟的清浮动样式类，clearfix
五、定位
我们可以使用 css 的 position 属性来设置元素的定位类型，postion 的设置项如下：
relative 生成相对定位元素，元素所占据的文档流的位置不变，元素本身相对文档流的位置进行偏移
absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了相对或者绝对或者固定定位的父级元素来进行定位，如果找不到，则相对于 body 元素进行定位
fixed 生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。
六、CSS实现垂直居中的问题
难点: 一个div在另一个div中的垂直居中的设置?

(1)利用text-align 实现块元素水平垂直居中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>设置元素垂直水平居中</title>
        <style type="text/css">
            .continer{
                width: 400px;
                height: 300px;
                padding-top: 100px;
                background: skyblue;
                text-align: center;
            }
            .inner{
                display: inline-block;
                width: 200px;
                height:
200px;
                background: orangered;
            }
        </style>
    </head>
    <body>
        <div class="continer">
            <div class="inner"></div>
        </div>
    </body>
</html>

(2)利用padding设置,且父元素和子元素的大小一致

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>设置元素垂直水平居中</title>
        <style type="text/css">
            .continer{
                width: 200px;
                height: 200px;
                padding: 20px;
                background: skyblue;
            }
            .inner{
                width: 200px;
                height: 200px;
                background: orangered;
            }
        </style>
    </head>
    <body>
        <div class="continer">
            <div class="inner"></div>
        </div>
    </body>
</html>

(3)利用position和margin进行元素水平垂直居中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>设置元素垂直水平居中</title>
        <style type="text/css">
            .continer{
                width: 200px;
                height: 200px;
                background: skyblue;
                position: relative;
            }
            .inner{
                width: 100px;
                height: 100px;
                background: orangered;
                position: absolute;
                left: 50%;
                top: 50%;
                margin: -50px 0px 0px -50px;
            }
        </style>
    </head>
    <body>
        <div class="continer">
            <div class="inner"></div>
        </div>
    </body>
</html>

(4)利用position进行元素的水平垂直居中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>设置元素垂直水平居中</title>
        <style type="text/css">
            .continer{
                width: 200px;
                height: 200px;
                background: skyblue;
                position: relative;
            }
            .inner{
                width: 100px;
                height: 100px;
                background: orangered;
                position: absolute;
                left: 0px;
                top: 0px;
                right:0px;
                bottom:0px;
                margin: auto;
            }
        </style>
    </head>
    <body>
        <div class="continer">
            <div class="inner"></div>
        </div>
    </body>
</html>

(5)适用于图片的居中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>设置元素垂直水平居中</title>
        <style type="text/css">
            .continer{
                width: 200px;
                height: 200px;
                background: skyblue;
                line-height: 200px;
                text-align: center;
            }
            img{
                width: 100px;
                height:
100px;
                vertical-align: middle;
            }
        </style>
    </head>
    <body>
        <div class="continer">
            <img src="images/InLett-logo.png"
alt="英莱特IT学院" />
        </div>
    </body>
</html>

日历课堂练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			li{
				width: 50px;
				height: 51.3px;
				list-style: none;
				float: left;
				border: 1px solid blue;
				border-left: none;
				border-right: none;
				text-align: center;
				cursor: pointer;
			}
			li:hover{
				/* background:red; */
				border: 1px solid blue;
			}
			li:nth-child(7n){
				color: red;
			}
			li:nth-child(7n-1){
				color: red;
			}
			#div1{
				width: 538px;
				height: 370px;
				border: 1px solid beige;
				background: url(imgs/1.jpg) no-repeat;
				margin: auto;
			}
			ul{
				width: 380px;
				height: 300px;
				padding-left: 20px;
				margin-top: 50px;
			}
			#div2{
				width:400px;
				height: 50px;
				margin: auto;
			}
			i{
				font-size: 5px;
				font-style: normal;
			}
			#li1{
				color: gray;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<ul>
				<li>日</li>
				<li>一</li>
				<li>二</li>
				<li>三</li>
				<li>四</li>
				<li>五</li>
				<li>六</li>
				<li id="li1">29<br>
				<i>廿二</i>
				</li>
				<li>1
				<br>
				<i>廿三</i></li>
				<li>2
				<br>
				<i>廿四</i></li>
				<li>3
				<br>
				<i>廿五</i>
				</li>
				<li>4
				<br>
				<i>廿六</i></li>
				<li>5
				<br>
				<i>惊蛰</i></li>
				<li>6<br>
				<i>廿八</i></li>
				<li>7<br>
				<i>廿九</i></li>
				<li>8<br>
				<i>妇女节</i></li>
				<li>9<br>
				<i>初一</i></li>
				<li>10<br>
				<i>龙头节</i></li>
				<li>11<br>
				<i>初三</i></li>
				<li>12<br>
				<i>植树节</i></li>
				<li>13<br>
				<i>初五</i></li>
				<li>14<br>
				<i>初六</i></li>
				<li>15<br>
				<i>消费者</i></li>
				<li>16<br>
				<i>初八</i></li>
				<li>17<br>
				<i>初九</i></li>
				<li>18<br>
				<i>初十</i></li>
				<li>19<br>
				<i>十一</i></li>
				<li>20<br>
				<i>廿二</i></li>
				<li>21<br>
				<i>十三</i></li>
				<li>22<br>
				<i>十四</i></li>
				<li>23<br>
				<i>十五</i></li>
				<li>24<br>
				<i>十六</i></li>
				<li>25<br>
				<i>十七</i></li>
				<li>26<br>
				<i>十八</i></li>
				<li>27<br>
				<i>十九</i></li>
				<li>28<br>
				<i>二十</i></li>
				<li>29<br>
				<i>廿一</i></li>
				<li>30<br>
				<i>廿二</i></li>
				<li>31<br>
				<i>廿三</i></li>
				<li id="li1">1<br>
				<i>愚人节</i></li>
				<li id="li1">2<br>
				<i>廿五</i></li>
				<li id="li1">3<br>
				<i>廿六</i></li>
			</ul>
			
		</div>
	</body>
</html>

字体课堂练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div1{
				width: 500px;
				height: 500px;
				margin: auto;
			}
			p{
				font-size: 50px;
			}
			#p1{
				color: aquamarine;
				text-shadow: 5px 5px 5px gray,-5px -5px 5px aqua;
			}
			#p2{
				color: antiquewhite;
				text-shadow: 5px 5px 5px gray,-5px -5px 5px aqua;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<p id="p1">月出于东山之上</p>
			<p id="p2">徘徊于斗牛之间</p>
		</div>
	</body>
</html>

H之一

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS设置文本字体，链接，背景等

一、CSS基础样式1.CSS文本及字体设计常用的应用文本的CSS样式设置文字的颜色color:red;设置文字的大小font-size:12px;设置文字的字体font-family:‘微软雅黑’;设置字体不倾斜font-style:‘normal’;设置字体倾斜font-style:‘italic’;设置文字是否加粗font-weight:bold; font-weight:normal设置文字的行高line-height:24px;
复制链接

扫一扫