CSS相关属性及基础知识

最新推荐文章于 2024-11-01 16:54:21 发布

m0_61886817

最新推荐文章于 2024-11-01 16:54:21 发布

阅读量73

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/m0_61886817/article/details/120385621

版权

1、字体属性

属性	表示	注意
font-size	字号	必须加上单位：px；（默认16px）
font-family	字体	字体之间用逗号隔开，类似“Microsoft Yahei”中间有空格的加引号
font-weight	字体粗细	默认值normal（不加粗）=400，bold（加粗）=700，在100-900范围，数字后面不跟单位，常使用数字来表示
font-style	字体样式	默认值normal（标准字体样式），italic（倾斜的字体样式）
font	字体连写	连写是有顺序的不能随意更换位置，不需要的属性可以删掉但字号和字体必须同时出现。例 div{font: font-style font-weight font-size font-family ;}

2、文本属性

属性	表示	注意
color	文本颜色	常用十六进制，#FFFFFF
text-align	文本对齐	left、center、right
text-indent	文本缩进	段落首行缩进2个字距长度 text-indent：2em；text-indent：10px；
text-decoration	文本修饰	默认none、下划线：underline、上划线：overline、删除线：line-through
line-height	行高	控制行与行之间的距离（文本高度+上间距+下间距）

3、引入方式

样式表	优点	缺点	使用情况	控制范围
行内样式表	方便，权重高	结构样式混写	少	控制一个标签
内部样式表	部分结构和样式相分离，放在<style>标签中	没有彻底分开	多	控制一个页面
外部样式表	与样式完全分离（新建.css文件来放置，在html中用 <link rel="stylesheet" href="css文件路径" >引入	需要引入	最多	控制多个页面

4、CSS的元素显示模式

4.1块元素

常见的块元素有<h>、<p>、<div>、<ul> 、<ol> 、<li>

特点：独占一行；高度、宽度、外边距、以及内边距都可控；宽度默认是容器的100%；

是一个容器及盒子，里面可以放行内或者块级元素。

文字类的元素内不能使用块级元素；

<p>标签主要用于存放文字，所以不能放块级元素，特别是不能放<div>,同理<h>也不能放其他块级元素。

4.2行内元素

常见的行内元素有<a> <strong> <b> <em> <i> <del> <span>

特点：相邻行内元素在一行上，一行可以显示多个；设置高、宽无效；默认宽度就是它本身内容的宽度；行内元素只能容纳文本或其他行内元素。

4.3行内块元素

常见的行内块元素有<img/> <input/> <td>

特点：和相邻行内元素在一行上，但是他们之间会有空白空隙，一行可以显示多个；

默认宽度就是本身内容的宽度；高度、行高、外边距以及内边距都可以控制。

<style>
        div{
            width: 300px;
            height: 100px;
            background-color: antiquewhite;
            /* 块元素转换为行内元素  */
             display: inline;
        }
        span{
            width: 300px;
            height: 100px;
            background-color:bisque;
            /* 行内元素转换为块元素  */
             display: block;
        }
        img{
            width: 300px;
            height: 200px;
            background-color:bisque;
            /* 转换为行内块元素 */
            display: inline-block;
        }
    </style>
</head>
<body>
    <div>我是块元素</div>
    <div>我是块元素2</div>
    <span>beijing</span>
    <span>shanghai</span>

    <img src="images/s02.jpg" alt="">
    <img src="images/s02.jpg" alt="">
</body>

5、CSS背景属性

属性	作用	值
background-color	背景颜色，常用于小logo、大背景、装饰性图片，便于控制位置	十六进制、预定义的颜色值
background-image	设置背景图片	url（图片路径）
background-repeat	页面上对背景图像进行平铺	repeat/no repeat repeat-X(背景图像在横向上平铺) repeat-y(背景图像在纵向平铺)
background-position	改变图片在背景中的位置（两个方位名词值前后顺序无关；若一个省略则默认居中对齐）	length(百分数、长度值)/position（方位名词：top/center/bottom/left/right）分别是X和y坐标
background-attachment	设置背景图像是否固定或者随着页面的其余部分滚动	scroll（背景滚动）/fixed(背景固定)
背景简写	书写更简单	背景颜色、图片地址、背景平铺、图像滚动、图片位置
背景色半透明	背景颜色半透明	background: rgba(0,0,0,0.3);后面必须是4个值，最后一个参数是alpha透明度，取值在0~1

6、CSS的三大特性

6.1层叠性

层叠性：当样式冲突遵循就近原则，样式不冲突不会层叠。

6.2继承性

CSS中的继承：子标签会继承父标签的某些样式比如文本颜色和字号（text- 、font-、line-开头的）

6.3优先级

权重是4组数字组成，但不进位。等级判断从左向右，如果某一位数值相同，则判断下一位数值。继承的权重是0，如果该元素没有选中，不管父元素权重多高，子元素得到的权重都是0。

选择器	选择器权重
继承或 *	0，0，0，0
元素选择器	0，0，0，1
类选择器、伪类选择器	0，0，1，0
ID选择器	0，1，0，0
行内样式style=“”	1，0，0，0
!important重要的	无穷大