常见的样式声明

常见的样式声明

备注：可以在控制台中调试样式，快速看到样式效果

• 1，color：文字颜色

颜色： （1），预设值：定义好的单词 red，yellow，green... （2），颜色函数：三原色，色值：光学三原色（红，绿，蓝）这三种颜色可以组合成任何一种颜色 R 红 G 绿 B 蓝 红+蓝=紫色 红+绿=黄色 蓝+绿=青色 红+绿+蓝=白色

    在计算机中三原色的每个颜色可以使用0-255之间的数字来表达
    0代表完全没有这个颜色，255这个颜色饱和度占比到最大程度

    ```html
    color：rgb(0,255,0) 红色饱和度占0，绿色饱和度占255，蓝色饱和度占0
    ```

（3）颜色代码 3，hex表示法：16进制 0-9 a-f 每2位代表一种颜色 R 红 G 绿 B 蓝 #f5f5f5,#008c8c 6位 关于颜色的简写方式：每2位有重复的，可以简写成1位 淘宝红：#ff4400,#f40 红：#ff0000 ,#f00 绿：#00ff00,#0f0 蓝：#0000ff,#00f

    不能简写：#ff4432 

透明色： transparent | rgb(255, 255, 255,0.5) 0.5透明度 数字 || 百分比

语法糖 foot：简写属性 字体大小，字体样式斜体，加粗，行高等写到一个属性上 16px/2 字体大写是16，行高是2

foot-variant:将小写字母变成大写字母 小型大写字母 比普通的大写字母会小一点

• 2，font-size：文字大小

  基准字号: 每个元素必须有字体大小，如果没有声明，则直接使用父元素字体大小， 如果没有父元素，则使用基准字号大小 基准字号大小的设置：浏览器中设置外观->字号

  单位： px：像素，绝对单位，固定值 例如：电脑分辨率1920*1080，横向把屏幕分为1920个小格，纵向分为1080个小格, 一个小格就是一个像素，像素值越大显示越大 rem：相对单位，相对于html根元素的字体大小 em：相对单位，相对于父元素的字体大小

  设置的大小是字体的宽还是高？ 高，如果设置的是宽，高矮不同一眼就能看出来，但是这种高， 宽一点，瘦一点没有关系

• 3，font-weight：文字粗细，可以取值数字，可以取值为预设值 默认值是normal：普通没有粗体

  加到最粗没有效果，是因为字体包的问题，没有更粗的字体包

• 4，font-family:文字类型 百度使用字体：PingFang SC,Arial,Microsoft YaHei,sans-serif

  注意：设置的文字类型必须是用户计算机中存在的字体才能有效果

  • 不确定用户是否有同样的字体类型解决方式：同时设置多个字体来匹配

  consolas(用于英文字体),微软雅黑,Arial,sans-serif(非衬线字体) 先匹配consolas，没有consolas,再匹配微软雅黑，没有再匹配Arial，就选择默认的计算机中有的非衬线字体

  衬线字体：用于打印的字体，例如： 宋体，打印出来美观 非衬线字体：sans-serif 打印不美观，但是在网页显示很圆滑美观，例如：微软雅黑

• 5，font-style：文字样式 ，斜体 italic

• 6，text-decoration：文本修饰 给文本线（上线，下线，中线）

• 7，text-indent：首行文本缩进 备注：中文缩进和英文缩进的2个字符大小时不同的，设置的时候注意

• 8，letter-spacing：文字之间的间隙，可以设置数字

• 9，text-align：文字的水平排列方式，默认是靠左, left,right,center, justify(两端对齐)

• 10，line-height：每行文本的高度，值越大行高越大 单行设置行高为容器的高度，可以让文本垂直居中 多行设置行高是行与行之间的间距

• 11，height：高度

• 12，width：宽度

实例：诗句文章

• 13， boreder:边框

border-width:1px; 规定边框的宽度（边框粗细） thin、medium和thick分别表示细、中等和粗，或者指定具体的数值来定义边框宽度

border-style: 规定边框的样式 实线，虚线 dotted: 定义一个点线边框 dashed: 定义一个虚线边框 solid: 定义实线边框 double: 定义两个边框。 两个边框的宽度和 border-width 的值相同 groove: 定义3D沟槽边框。效果取决于边框的颜色值 ridge: 定义3D脊边框。效果取决于边框的颜色值 inset:定义一个3D的嵌入边框。效果取决于边框的颜色值 outset: 定义一个3D突出边框。 效果取决于边框的颜色值

border-color: #f40; 规定边框的颜色 注意： border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式 预设值 name - 指定颜色的名称，如 "red" 颜色函数 RGB - 指定 RGB 值, 如 "rgb(255,0,0)" 颜色代码 Hex - 指定16进制值, 如 "#ff0000" 还可以设置边框的颜色为"transparent"

border是复合属性(速写属性| 简写属性)：多个属性组合一起使用

border-style 和border-width 、 border-color 可以使用border:1px solid red;简写 顺序可以打乱 solid red 1px

上下左右边框的样式可以单独设置 border-top-style:dotted; border-right-color:red; border-bottom-style:dotted; border-left-style:solid; border-top-left-radius: 10px; 左上角圆角 border-bottom-right-radius: 5px; 右下角圆角

实例：写等腰三角形，直角三角形