css学习第四章之常用属性(第一节)
css常用属性
一、像素
我们的电脑屏幕是，是由一个一个“小点”组成的，每个“小点”，就是一个像素（px）。
规律：像素点越小，呈现的内容就越清晰、越细腻。
二、颜色的表示方式
- 我们常给标签设置一个颜色，如 color:xx
2.1 颜色名称
- 红色：red
- 绿色：green
- 蓝色：blue
- 紫色：purple
- 橙色：orange
- 灰色：gray
- 1.1 示例
<style>
.atguigu1 {
color: red;
}
.atguigu2 {
color: green;
}
.atguigu3 {
color: blue;
}
.atguigu4 {
color: pink;
}
</style>
</head>
<body>
<h2 class="atguigu1">尚硅谷</h2>
<h2 class="atguigu2">尚硅谷</h2>
<h2 class="atguigu3">尚硅谷</h2>
<h2 class="atguigu4">尚硅谷</h2>
</body>
-
效果：
-
- 颜色名这种方式，表达的颜色比较单一，所以用的并不多。
- 具体颜色名参考 MDN 官方文档： https://developer.mozilla.org/en-US/docs/Web/CSS/named-color
- 颜色表达不精细，如果需要淡红色，这种就没法做到。只能从有限的颜色列表获取
2.2 rgb 或者 rgba
通道三原色, 红 绿 蓝，每一种颜色取值范围为 0 ~ 255之间
-
编写方式：使用 红、黄、蓝 这三种光的三原色进行组合。
- r 表示 红色
- g 表示 绿色
- b 表示 蓝色
- a 表示 透明 取值范围 0～1之间
-
示例
<style> .atguigu1 { color: rgb(255, 0, 0); } .atguigu2 { color: rgb(0,255,0); } .atguigu3 { color: rgb(0,0,255); } .atguigu4 { color: rgba(255, 0, 0,0.5); } .atguigu5 { color: rgba(0,255,0,.5); } .atguigu6 { color: rgba(0,0,255,50%); } </style> </head> <body> <h2 class="atguigu1">尚硅谷</h2> <h2 class="atguigu2">尚硅谷</h2> <h2 class="atguigu3">尚硅谷</h2> <h2 class="atguigu4">尚硅谷</h2> <h2 class="atguigu5">尚硅谷</h2> <h2 class="atguigu6">尚硅谷</h2> </body> -
使用方法
/* 使用 0~255 之间的数字表示一种颜色 */ color: rgb(255, 0, 0);/* 红色 */ color: rgb(0, 255, 0);/* 绿色 */ color: rgb(0, 0, 255);/* 蓝色 */ color: rgb(0, 0, 0);/* 黑色 */ color: rgb(255, 255, 255);/* 白色 */ /* 混合出任意一种颜色 */ color:rgb(138, 43, 226) /* 紫罗兰色 */ color:rgba(255, 0, 0, 0.5);/* 半透明的红色 */ /* 也可以使用百分比表示一种颜色（用的少） */ color: rgb(100%, 0%, 0%);/* 红色 */ color: rgba(100%, 0%, 0%,50%);/* 半透明的红色 */ -
小规律
- 若三种颜色值相同，呈现的是灰色，值越大，灰色越浅
- rgb(0, 0, 0) 是黑色， rgb(255, 255,255) 是白色。
- 对于 rbga 来说，前三位的 rgb 形式要保持一致，要么都是 0~255 的数字，要么都是 百分比 。
2.3 hex 或 hexa 十六进制
HEX 的原理同与 rgb 一样，依然是通过：红、绿、蓝色 进行组合，只不过要用 6位（分成3组） 来 表达
-
格式为：# rrggbb
-
每一位数字的取值范围是： 0 ~ f ，即：（ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f ）
所以每一种光的最小值是： 00 ，最大值是： ff
范围00到 ff 逢16进一位，如
00 01 02 03 04 05 06 07 08 09 0a 0b 0c 0d 0e 0f 10 11 12 13 14 15 16 17 18 19 1a 1b 1c 1d 1e 1f 20 以此类推 -
示例
<style> .atguigu1 { color: #ff0000 } .atguigu2 { color: #00ff00 } .atguigu3 { color: #0000ff } /* 黑色 */ .atguigu4 { color: #000000 } /* 红色透明度为 50% */ .atguigu5 { color: #ff000088; } /* 绿色 透明度为50% */ .atguigu6 { color: #00ff0088; } /* 蓝色 半透明 */ .atguigu7 { color: #0000ff88; } </style> </head> <body> <h2 class="atguigu1">尚硅谷1</h2> <h2 class="atguigu2">尚硅谷2</h2> <h2 class="atguigu3">尚硅谷3</h2> <h2 class="atguigu4">尚硅谷4</h2> <h2 class="atguigu5">尚硅谷5</h2> <h2 class="atguigu6">尚硅谷6</h2> <h2 class="atguigu7">尚硅谷7</h2> </body> -
效果
-
使用示例
color: #ff0000;/* 红色 */ color: #00ff00;/* 绿色 */ color: #0000ff;/* 蓝色 */ color: #000000;/* 黑色 */ color: #ffffff;/* 白色 */ /* 如果每种颜色的两位都是相同的，就可以简写*/ color: #ff9988;/* 可简为：#f98 */ /* 但要注意前三位简写了，那么透明度就也要简写 */ color: #ff998866;/* 可简为：#f986 */
2.4 hsl或hsla
HSL 是通过：色相、饱和度、亮度，来表示一个颜色的，格式为： hsl(色相,饱和度,亮度)，这个用过photoshop的人比较了解，相当于是一个色相环360度的圆环
- 色相：取值范围是 0~360 度，具体度数对应的颜色如下图：
- 饱和度：取值范围是 0%~100% 。（向色相中对应颜色中添加灰色， 0% 全灰， 100% 没有 灰）
- 亮度：取值范围是 0%~100% 。（ 0% 亮度没了，所以就是黑色。 100% 亮度太强，所以就是 白色了）
HSLA 其实就是在 HSL 的基础上，添加了透明度。
- 示例
<style>
/* 红色 0-360 之间 */
.atguigu1 {
color: hsl(0, 100%, 50%)
}
/* 绿色 */
.atguigu2 {
color: hsl(120, 100%, 50%)
}
/* 蓝色 */
.atguigu3 {
color: hsl(240, 100%, 50%)
}
/* 红色 0-360 之间 半透明*/
.atguigu55 {
color: hsla(0, 100%, 50%,50%)
}
/* 绿色半透明 */
.atguigu6 {
color: hsla(120, 100%, 50%,50%)
}
/* 蓝色 半透明 */
.atguigu7 {
color: hsla(240, 100%, 50%,50%)
}
</style>
</head>
<body>
<h2 class="atguigu1">尚硅谷1</h2>
<h2 class="atguigu2">尚硅谷2</h2>
<h2 class="atguigu3">尚硅谷3</h2>
<h2 class="atguigu5">尚硅谷5</h2>
<h2 class="atguigu6">尚硅谷6</h2>
<h2 class="atguigu7">尚硅谷7</h2>
</body>
-
效果
三、字体属性
- 字体大小
- 字体族
- 字体风格
- 字体粗细
3.1 字体大小
-
属性名称： font-size
-
作用：改变字体大小
-
使用:
div {
font-size: 40px;
}
-
注意点：
-
如果设置了 0px大小， 那么就看不见字了
-
如果低于浏览器默认值，比喻 最小值为12px,那么你这个时候设置 12 ~ 1 之间的数值默认都是12 ，设置低于这个数值的都不会生效
-
一般设置body字体大小，那么他下边的都会继承这个大小
-
-
示例
<style> div { font-size: 40px; } </style> </head> <body> <div>测试1</div> </body>
3.2 字体族
-
属性名： font-family
-
作用： 控制字体类型
-
示例
<style> div { font-size: 40px; } .test1 { font-family: "楷体"; } .test2 { font-family: "宋体"; } .test3 { font-family: "微软雅黑"; } .test4 { font-family: "STCaiyun"; } .test5 { font-family: "华文琥珀"; } </style> </head> <body> <div class="test1">测试1</div> <div class="test2">测试2</div> <div class="test3">测试3</div> <div class="test4">测试4</div> <div class="test5">测试5</div> </body> -
效果
-
为什么叫字体族
-
字体家族，也就是可以同时写一组字体，从第一个找，直到匹配上字体。
-
字体分为衬线和非衬线，衬线能看得到菱角分明，如宋体 楷体等。最后写一组 sans-serif
-
使用字体的英文名字兼容性会更好，具体的英文名可以自行查询，或在电脑的设置里 去寻找。
-
如果字体名包含空格，必须使用引号包裹起来。
.test6 {
font-family: “STCaiyun”,“Microsoft YaHei”,sans-serif;
}
-
3.3 字体风格
-
属性名：font-style
-
作用：控制字体是否为斜体
-
常用值
- normal ：正常（默认值）
- italic ：斜体（使用字体自带的斜体效果）
- oblique ：斜体（强制倾斜产生的斜体效果）
-
示例
<style> div { font-size: 40px; } /* 正常 */ .test1 { font-style: normal; } /* 倾斜 */ .test2 { font-style: italic; } .test3 { font-style: oblique; } </style> </head> <body> <div class="test1">尚硅谷1</div> <div class="test2">尚硅谷2</div> <div class="test3">尚硅谷3</div>
3.4 字体粗细
-
属性名：font-weight
-
作用： 控制字体粗细
-
常用值
-
关键词
- lighter ：细
- normal ： 正常
- bold ：粗
- bolder ：很粗 （多数字体不支持）
-
数值
- 100~1000 且无单位，数值越大，字体越粗 （或一样粗，具体得看字体设计时的 精确程度）。
- 100~300 等同于 lighter ， 400~500 等同于 normal ， 600 及以上等同于 bold 。
- 大概 300 的倍数 对应这三个
-
-
示例
<style> div { font-size: 40px; } /* 比较细 */ .test1 { font-weight: lighter; } /* 正常 */ .test2 { font-weight: normal; } /* 加粗 */ .test3 { font-weight: bolder; } .test4 { font-weight: 500; } </style> </head> <body> <div class="test1">尚硅谷1</div> <div class="test2">尚硅谷2</div> <div class="test3">尚硅谷3</div> <div class="test4">尚硅谷3</div> </body>
3.4 复合属性
将以上的多个属性联合一起写合并成一个属性
-
属性名： font
-
编写规则
- 字体大小、字体族必须都写上
- 字体族必须是最后一位、字体大小必须是倒数第二位。
- 各个属性间用空格隔开。
-
示例
<style> /* 斜体 大小为40px 华文琥珀 */ .test1 { font: oblique 40px "STCaiyun" } </style> </head> <body> <div class="test1">尚硅谷1</div> </body>