CSS Day5-像素、颜色、字体样式-Toy模板网

这篇具有很好参考价值的文章主要介绍了CSS Day5-像素、颜色、字体样式。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

5.1 像素

5.1.1 px

一般情况下浏览器默认的最小像素是12px,即使你设置的像素小于12px，文字也不会变小

5.1.2 百分比%

根据父元素的大小来设置自己的大小

好处：

当父元素大小发生变化时子元素也会跟着改变适配屏幕的大小；

移动端自适应比较常用。

5.1.3 rem

根据根元素（html)去设置它的大小

1rem=根元素设置的大小

移动端自适应比较常用

5.1.4 em

根据当前元素来设置自己的字体大小,可以根据自己的字体大小设置自己的宽高等

1em=1font-size(1font-size是指你设置的字体大小)

好处：适用于移动端自适应屏幕大小

<style>
 .emFont {
         font-size: 60px;
         width: 2em;
         height: 2em;
         background-color: crimson;
     }
</style>
<body>
    <div class="emFont">em字体大小</div>
</body>

5.2 颜色

color：颜色名，不常用；
rgb：浓度范围在0~255值之间，0是最小（代表没有），255是最大；
color: rgb(172, 39, 39);
rgba：a代表透明度 a的值在0-1之间 0代表完全透明 1代表不透明

a的值如果是小数的话可以省略小数点前面的0，写为（.5)
color: rgba(50%, 50%, 50%, 1);
HEX：使用十六进制的rgb值来表示颜色，主要的值是0-9 a-f 值的范围是00-ff
00代表最小值（相当于rgb中的0） ff代表最大值（相当于rgb中的255）

和rag的区别就是一个是使用的十六进制一个是使用的0-255之间数字

每一组的值代表一种颜色，

第一组代表红色

第二组代表绿色

第三组代表蓝色

三组值都是双数（除非每一组值是相同的，可以省略一个，例如：#fff

注意：三组值要么都大写要么都小写,三个值不是非要是双数

常用的值： #f00 红色 #ccc 灰色 #000黑色 #fff 白色 #0f0 绿色 #00蓝色

HEXA

HSL（了解）

5.3 字体样式

字体大小 font-size:20px; 大部分浏览器默认字体大小为16px；

字体样式 font-style 属性值为：normal、italic [i'tælik] 文字会以斜体显示、oblique [ə'bli:k]文字会以倾斜的效果显示；

字体类型 font-family:宋体；

字体粗细 font-weight 属性值为：normal、bold、100-900（400正常、700加粗）；

字体行高 line-height px单位设置：如果想要文字垂直居中，line-height的值需等于line-height的值

小知识点：行高经常还用来设置文字的行间距

行高=上间距+文字高度+下间距

行间距 = 行高 - 字体大小

文本样式 text-transform（了解）

文本修饰 text-decoration 属性值为：none underline overline（上划线） line-through（删除线）

字符间距 letter-spacing:2px;

单词距离 word-spacing：2px;

文本对齐方式 text-align 属性值为：left right center justify（两端对齐）

首行缩进 text-indent 一般用em作为单位

正值->向右侧缩进指定的像素

负值->向左移动指定的像素

设置网页如何处理空白 white-space 可选值： normal正常 nowrap不换行 per保留空白

文本溢出 text-overflow 可选值：clip（修剪文本） ellipsis[i'lipsis] （显示省略符号来代表被修剪的文本）

5.4 表格的属性

边框宽度：border-width

默认值：3px

指定4个值代表：上、右、下、左

指定3个值代表：上、左右、下

指定2个值代表：上下、左右

另一种写法：border-top(right/bottom/left)-width

边框颜色：border-color

设置边框的颜色默认值是黑色

同border-width方向值

border-style: none默认值、solid实线、dashed虚线、dotted点线、double双实线
border
可以同时设置四个边框的宽度，样式，颜色

一指定就是同时指定四个边不能分别指定:border-top、 border-right、 border-bottom、 border-left

可以单独设置四个边的样式，规则和border一样，只不过它只对一个边生效
border:2px solid red;

文本阴影 text-shadow:h-shadow v-shadow blur color;

参数1:必需。水平阴影的位置。允许负值

参数2: 必需。垂直阴影的位置。允许负值

参数3: 可选。模糊的距离，只为正值

参数4:可选。阴影的颜色一般用rgba
text-shadow:0px -10px 5px red;
盒子阴影 box-shadow

参数1:必需。水平阴影的位置。允许负值。

参数2: 必需。垂直阴影的位置。允许负值。

参数3: 可选。模糊的距离。

参数4:可选。阴影的颜色一般用rgba

5.5 CSS三大特性

层叠性：如果样式冲突，遵循就近原则，哪个离的最近就遵循哪个；
继承性：儿子和孙子都可以继承祖宗的样式，只有color、font-开头的text-开头的、line-开头的这些具有继承性；
优先级：important >行内 >id >类 >标签 > * >继承

1,0,0,0 0,1,0,0 0,0,1,0 0,0,0,1 0,0,0,0

三像素解决方法：

元素垂直对齐 vertical-align 可选值：baseline默认值基线对齐 top顶部对齐 bottom底部对齐 middle居中对齐

vertical-align设置除默认值以外的可选值
把图片转化为块元素
给元素font-size设置为0

5.6 盒子模型

content：内容区（子元素和文本内容），width和height设置大小

padding：内边距，内容区与边框的距离

border：边框，宽度、样式、颜色

margin：外边距，盒子和盒子之间的距离

行内元素可以设置左右margin值，但设置上下margin值没有任何效果

margin值可以是auto,块级元素设置 margin:auto; 可以实现该元素在父元素内水平居中，但行内元素/行内块元素不可以

盒子大小=content+左右padding+左右border

水平布局： margin-left border-left padding-left width padding-right border-right margin-right

垂直布局：父元素如何处理溢出的子元素 overflow：；

可选值：

visible 默认值子元素会从父元素中溢出，在父元素外部的位置显示

hidden 溢出的内容将会被裁剪不会显示

scroll 生成两个滚动条，通过滚动条来查看完整的内容

auto 根据需要生成滚动条

overflow-y：scroll

外边距重叠：在网页中相邻的垂直方向的外边距，会发生外边距的重叠，兄弟元素之间的相邻外边距会取最大值而不是取和，谁大听谁的

清除浏览器的默认样式：
<style>
    *{
            padding: 0;
            margin: 0;
            text-decoration: none;
            list-style: none;
        }
</style>

标准盒模型 width=content

<!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: 300px;
            height: 300px;
            padding: 20px;
            border: 10px solid red;
            margin: 20px;
        }
    </style>
</head>

<body>
    <div>可是大家思考</div>
</body>

</html>

IE盒模型 width=content+padding+border box-sizing:border-box content-box;

<!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: 300px;
            height: 300px;
            padding: 20px;
            border: 10px solid red;
            margin: 20px;
            /* IE盒模型 */
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <div>可是大家思考</div>
</body>

</html>

5.7 隐藏元素

display 用来设置元素显示的类型 none

visibility 用来设置元素的显示状态可选值： visible 默认值元素在页面中正常显示 hidden 元素不在页面中显示（隐藏一个元素），位置依然保留

<!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: 200px;
            height: 200px;
        }

        .box1 {
            background-color: red;
            /* 隐藏元素，直接销毁元素，在页面中不再占据原本位置， */
             display: none; 
            /* hidden 只是隐藏元素，还占据原来的位置 */
            /* visibility: hidden;*/
        }

        .box2 {
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

</html>

文章来源地址https://www.toymoban.com/news/detail-790221.html

到了这里，关于CSS Day5-像素、颜色、字体样式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！