了解CSS
这是我参与「第四届青训营 」笔记创作活动的的第2天
一、CSS 是什么？
-
CSS：Cascading Style Sheets
-
用来定义页面元素的样式：
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果
//css基础代码示例：
h1{
//h1--选择器selector
color: white;
font-size: 14px;
//声明declaration = 选择器property + 属性值 value
}
//选择器 + 一对大括号 = 一条规则
- 在页面中使用CSS：
<!--外链（推荐: 将内容与样式分离）-->
<link rel = "stylesheet" href = "/assets/style.css">
<!--嵌入-->
<style>
li { margin: 0; list-style: none; }
p { margin: lem 0; }
</style>
<!--内联（不推荐）-->
<p style = "margin:lem 0">Example Content</p>
在html文件中使用嵌入方式设置样式，示例如下：
<html>
<head>
<meta charset = "UTF-8" >
<title>Blog</title>
<style>
h1{
color:orange;
font-size:24px;
}
p{
color:gray;
font-size:14px;
lin-height;
}
</style>
</head>
<boby>
<h1>你好！<.h1>
<p>欢饮您，接下来我们进入前端内容的学习吧~</p>
</body>
</html>
- CSS 工作过程：
- 选择器selector
- 找出页面中的元素，以便为其各自设置样式
- 使用多种方式选择元素
- 按照标签名、类名或者id
- 按照属性
- 按照DOM树中的位置
通配选择器：*
<h1> This is heading</h1>
<p> this is some paragraph.</p>
<style>
*{
color:red;
font-size:20px;
}
</style>
标签选择器：由标签来设置样式
id选择器：id
id 的属性值是唯一的！！！
设置样式时：#+id值
<h1 id = "logo">
<img
src = "https://assets.codepen.io***"
alt = "HTML5 logo"
width = "48" />
HTML5 文档
</h1>
<style>
#logo{
font-size: 60px;
font-weight:200;
}
</style>
类选择器：对同一类型的标签设置
<h2>Todo List</h2>
<ul>
<li class = "done">Learn HTML</li>
<li class = "done">Learn CSS</li>
<li>Learn JavaScript</li>
</ul>
<style>
.done {
color:gray;
text-decoration:line-through;
}
</style>
属性选择器：通过属性及属性值选中元素
<lable>用户名：</lable>
<input value = "yang" disabled />
<lable>密码：</lable>
<input value = "123456" type = "password" />
<style>
[disabled] {
<!--代表属性为 disabled 时 设置为以下样式-->
background:#eee;
color:#999;
}
input[type = "password"] {
<!--代表属性为 type 且属性值为 password 时 设置为以下样式-->
border-color:red;
color:red;
}
a[href ^= "#"]{
<!--代表属性 href 为以 # 开头 时 设置为如下样式-->
}
a[href $= ".jpg"]{
<!--代表属性 href 为以 .jpg 结束时 设置为如下样式-->
}
</style>
伪类：状态 结构
<style>
a:link{
<!--link -- 当前默认状态下-->
color:black;
}
a:visited{
<!--visited -- 访问该链接之后-->
color:gray;
}
a:hover{
<!--hover -- 将鼠标置于该链接上方时-->
color:orange;
}
a:active{
<!--active -- 鼠标点击时-->
color:red;
}
:focus{
<!--focus -- 聚焦状态-->
outline:2px solid orange;
}
li:first-child{
}
</styple>
可以将以上相互 组合 使用！！！
例如：属性选择器+类选择器 == 直接组合
<input class = "error" value = "a"> <style> input.error{ border-color:red;} </style>
选择器组：
二、颜色
- RGB：#aabbcc
rgb(142,341,234)
每两个数表示一个值
- HSL：
H：hue——色相 S：Saturation——饱和度 L：Lightness——亮度
hsl(18,23%,35%)
- alpha 透明度
为1时，图片是不透明的
#ff0000ff
rgba(255, 0, 0, 1)
hsla(0, 100%, 100%, 1)
三、字体
- font-family
可指定多个字体，按照次序选择，若浏览器没有排前面的字体，则向后面继续匹配字体进行使用。
一般要求确保，在font-family字体列表设置时，最后一个写上通用字体族。
在中英文字体混合排列时，建议将英文字体放在中文字体的前面。
通用字体族：
- Serif 衬线体
- Sans-Serif 无衬线体
- Cursive 手写体S
- Fantasy 夸张的字体
- Monospace 等宽字体
使用 web fonts： 会造成一定的开销，且中文字体比英文更大
<style>
@font-face{
font-family: "Megrim";
src:
url(//字体下载链接)
format('woff2');
}
</style>
- font-size
- 关键字
- small、medium、large
- 长度
- px、em
- 百分数
- 相对于父元素字体大小
- font-style
- 正常（非斜体）：
font-style: normal; - 斜体：
font-style: italic;
- font-weight
字重：并不是所有的字体都有相对应的字重变化 需要字体本身支持各规格的字重
normal：font-weight: 400
bold:font-weight: 700
- line-height
行高：两行文字的基准线
- font
font: style weight size/height family
/*斜体 粗细 大小/行高 字体族*/
font: bold 14px/1.7 Helvetica, sans-serif;
- text-align
- left
- center
- right
- justify
- spacing
- letter-spacing 字符间的间距
- word-spacing 每个词之间的间距
- white-space
空白符的控制：
- normal：默认行为 将多个空格合并为一个
- nowrap：强制不换行
- pre：保留所有的 包括空格和换行 显示的内容将与源代码部分一致
- pre-wrap：保留空格 换行时再换行处理
- pre-line：保留换行 合并空格
