Html&CSS学习笔记4

如何设置样式?

在此之前要知道,有一些属性具有继承特性,但都能修改起默认特性。
继承:
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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值