Html&CSS学习笔记4

最新推荐文章于 2024-09-22 20:00:51 发布

冰河星雨

最新推荐文章于 2024-09-22 20:00:51 发布

阅读量179

点赞数

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

本文链接：https://blog.csdn.net/baidu_26786335/article/details/107726230

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

如何设置样式？

在此之前要知道，有一些属性具有继承特性，但都能修改起默认特性。
继承：
inherit;/继承父类的属性/
initial;/*不继承父类属性/

颜色单位：

1.关键字

		blue
		lightblue

2.rgb(r,g,b):0-255之间

3.rgba(r,g,b,a):

		a:0-1之间：
			0代表完全透明 1代表完全不透明

4.16进制的颜色值

拾色器/取色器：

<!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{
            width: 10px;
            height: 100px;
            border: 1px solid red;
            color: red;/*在没有其他设置的情况下，div下的子标签默认继承div的属性*/
        }
        div p{
            width: 50px;
            /* height: 50px; */
            height: inherit;/*强制继承父类height属性*/
            border: 1px solid blue;
            color: initial;/*不去继承父类color属性*/
        }
        div#color{
            background-color: cornflowerblue;/*rgba(r,g,b,a) a:0-1之间：0代表完全透明1代表完全不透明*/
            
        }

    </style>
</head>
<body>
    <div>hello
        <p>world!</p>
    </div>
    <div id="color"></div>
</body>
</html>

尺寸单位


px	绝对单位	无论其他相关的设置怎么变化，像素指定的值是不会变化的。
em	相对单位	1em与当前元素的字体大小相同（一个大写字母M的宽度）默认1em=16px
%	相对单位	它们的长度总是保持相同的长度，即使它们的父容器的宽度发生变化。

字体样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体</title>
    <style>
        span{
            font-style: oblique;/*用于打开和关闭斜体文本，italic:斜体，oblique:模拟斜体*/
            font-weight: bold;/*代表字体的粗细程度，取值范围100-900，bold:700,normal:400*/
            font-size: 20px;/*改变字体的大小*/
        }
        div{
            width: 10px;
            height: 10px;
            border: 1px solid red ;
            text-align:center;/*设置文本对其方式：left,center,right 均为水平对齐*/
            text-transform: uppercase;/*允许字体改变，
                                        none:不做任何改变
                                        uppercase:将文本转换为大写
                                        lowercase:将文本转换为小写
                                        capitalize:将所有单词第一个字母转换为大写
                                        full-width:转换为类似于一个等宽字体*/
            text-decoration: underline;/*设置或取消文本修饰 none:取消所有文本修饰
                                                            underline:添加下划线
                                                            overline：添加上划线
                                                            line-through：为文本添加删除线*/
            text-shadow:red;/*设置或取消文本阴影，语法：text-shadow:h-shadow v-shadow blur color         none取消所有阴影
                                                                    h-shadow:水平阴影的位置，必须
                                                                    v-shadow:垂直阴影的位置，必须
                                                                    blur:模糊的距离
                                                                    color:阴影的颜色*/
            text-indent: 2em;/*定义一个块元素首行文本缩进量 */
        }
        p{
            font-family: "黑体2";
        }
        @font-face {
            font-family: 黑体2;
            src: url('');
        }
    </style>
</head>
<body>
    <span>hello</span>
    <i>hello</i>
    <div>
        hello
    </div>
    <p>一二三四1234</p>
</body>
</html>

引用网络字体：

1.下载对应字体

2.设置字体
	@font-face{
		font-famliy:'sd';
		src:url(xxx);
	}
3.引用字体
     	div{
		font-family:'sd'
	}

字体图标库：

fontawesome：
.css
一句话将Font Awesome加入您的网页中。您完全不用下载或者安装任何东西！

1.引入外部样式文件

	link标签
	将以下代码粘贴到网页HTML代码的 < head > 部分

<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

2.使用行内元素

	<span class='fa fa-xxx'></span>
	outer.css
		.one{
			color:red
		}
	index.html:
		<div class='one'></div>

iconfont

1.引入css

2.使用

	<i class='iconfont xxxx'></i>

列表样式

ol有序列表
私有属性:start(从哪开始)
reversed:布尔属性，反转


list-style-type	设置列表项标志类型
list-style-position	设置列表项标志出现的位置
list-style-image	自定义设置列表项标志
list-style	列表样式的速记写法

#outer{
			list-style-type: upper-roman;/**/
		}

list-style-type取值	说明
none	取消所有样式
disc	实心圆
circle	空心圆
square	实心正方形
upper-roman	大写罗马数字
lower-roman	小写罗马数字

list-style-position 取值	说明
outside	列表项标志出现在主块框的外部
inside	列表项标志出现在主块框的内部

#outer li{
			list-style-image: url('./2.png');
		}

list-style速记写法

[<type>][<image>][<position>]

属性中带有[ ]是可选属性

#outer li{
			list-style:none url('./2.png') inside;
		}

line-height 设置列表的行高
当一个块级元素中只有一行文字时，将列表的行高和height的设置成同一个值，可以将文字垂直居中。

补充

块级元素可以设置宽高
行内元素不能设置宽高
img:
特殊的行内元素
私有属性：width height

冰河星雨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录