5_CSS属性

JRealcs

已于 2022-12-30 21:41:49 修改

阅读量68

点赞数

分类专栏： HTML5+CSS3 文章标签： html 前端

于 2022-07-14 18:10:21 首次发布

本文链接：https://blog.csdn.net/weixin_58764638/article/details/125790138

版权

HTML5+CSS3 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

一、边框属性的使用

边框属性的使用

组成边框的样式
- 边框宽度 border-width
- 边框样式 border-style
- 边框颜色 border-color
边框属性的属性值
- 边框宽度:数值加单位(px)
- 边框样式:solid(实线)dashed(虚线)dotted(点线)double(双实线)
- 边框颜色
  - 英文单词:yellow、green、red . . .
  - 十六进制:
    - 以#开头,后面接六个字符(O_9af) #1234ab
    - 当后面的六个字符相等的时候可以简写成3个
    - {#778899(#789) #000 #fff #ccc}
边框属性的简写方式
- 属性：border
- 属性值：border-width border-style border-color
通过需求拓展边框其他属性的用法
- 改变顶部边框的颜色:border-top-color
- 改变右侧所有的样式:border-right
- 除标签的自带边框:border:none/0
面试题:绘制三角形

二、三角形的绘制

<style>
	html{
        background-color: pink
    }
    div{
        width: 0;
        height: 0;
        border: 100px solid #000;
        border-top-color: transparent;/* 透明 */
        border-right-color: red;
        border-bottom-color: transparent;
        border-left-color: transparent;
    }
</style>
<body>
	<div></div>
</body>

三、盒模型的总结

盒模型属性的总结

概念:设置元素之间的间距
组成部分:content、padding、border、margin
盒模型的分类
- 标准盒模型
  - 盒子自身的大小:content+paddinng+border
  - 盒子真实的大小:content+paddinng+border+margin
- 怪异盒模型
  - 盒子自身的大小:content(paddinng+border)
  - 盒子真实的大小:content(paddinng+border)+margin
如何形成怪异盒模型(IE)
- 属性:box-sizing
- 属性值:content-box(标准)/border-box(怪异)
- 特点:padding和border都是长在盒子内部的并且不会撑大盒子的宽高大小

四、文本大小设置

文本大小的设置

属性:font-size
属性值:数值加单位(网页中常用的单位像素px)
- 在浏览器中默认的字体大小是16px
- 由于浏览器存在差异,官方规定最小的字体只能是12px
  - 除了px单位还有很多其他可用单位
  - pt、em、rem、%、deg、vw、vh、vamx、vmin、rpx
  - em:相对单位,相对有父级元素计算常用于首行缩进

五、字体类型

字体类型属性

属性:font-family
属性值
- 在浏览器中默认的字体类型是微软雅黑(商用收费),win11系统默认的是宋体/新宋体
- 中文属性值:建议加引号(双/单)
  - 英文属性值：当属性值只有一个英文单词的时候可以省略引号，有多个必须添加引号
  - 在使用设置的字体时候需要在本地中有下载字体包

六、加粗倾斜属性

加粗和倾斜的属性

一.加粗属性

属性:font-weight
属性值
- 设置100_{900之间的整百数(100}500表示正常字体,600~900表示加粗字体)
- bold/bolder 加粗的/更粗的
- 重要:normal 清除默认的加粗样式

二:倾斜属性

属性:font-style
属性值
- italic(斜体字)
- oblique(倾斜的文字)
- 重要:normal 清除默认的倾斜样式

七、行高属性的使用

一:垂直方向对齐方式

属性:line-height
解释:基线,多行文本之间从第一行顶部到第二行顶部的间距
重点:设置行高和容器高度一样的时候,单行文本就会在垂直方向居中显示

二:水平方向对齐

属性:text-align
属性值
- left、 right、 center
- justify 两端对齐

八、文本的复合属性

复合属性写法

属性:font
属性值:font-weight font-style font-size/line-height font-family
- font-weight font-style 没有需求可以不写并且位置可以互换
- font-size/line-height不可以换位置
- font-family无论是否有需求都必须写