这是我参与「第四届青训营 」笔记创作活动的的第2天
一条css语句的组成
h1{ color:white; font-size:14px; }
在这条css语句中，
h1是选择器seleor，表示给页面中所有h1
标签设置样式
color是选择器property，表示给 h1选择颜色；
white是属性值value，表示选择的颜色值
font-size：14px叫做声明declaration由选择器和属性值组成
由大括号括起来的声明块就是css语句；
在页面中使用css
- 外链
<link href="/assets/style.css" rel="stylesheet" />
2.嵌入
.red{
color :red ;
font-size:20px;
}
</style>
注：pproperty和value之间用":"连接；
每条声明之后必须有分号； 3.内联
每个声明之间由分号隔开，与嵌入写法基本一致，如果 只有一条声明（如上实例）可以不写分号；
三种方式的优先级：就近原则
CSS是如何工作的
选择器
- 找出页面中的元素，以便给它们设置样式
- 使用多种方式选择元素
- 按照标签名、类名或者id
- 按照属性
- 按照DOM树中的位置
通配选择器
<style>
*{
padding:0;
margin:0;
}
</style>
通常作用于清除网页元素的内外边距，通配选择器是对页面所有元素生效
标签选择器
p{
text-indent:2em;
/*此时的2em就是缩进当前元素两个文字大小的距离
*/
}
/*行间距*/
p{
line-height:26px;
}
</style>
使用元素标签作为选择器，会对网页中所有该标签生效
id选择器
<style>
#pink {
color: pink;
}
</style>
<div id="pink">id选择器示例</div>
<a id="pink">id选择器示例2</a><!--这样是不对的-->
通常来说，id在页面中是唯一的，重复id会可能使得预期效果不成功。
类选择器
<meta charset="utf-8" />
<title>类选择器</title>
<style>
.red{
color :red ;
font-size:20px;
}
</style>
</head>
<body>
<ul>
<li>shsh</li>
<li class="red">ksjsjsj</li>
<li>fjsjnf</li>
<li class="red ">sjksn</li>
</ul>
<div class="red">呜呜呜</div>
</body>
相较于id选择器，类选择器就可以适用于有好几个元素都使用同样样式的场景
属性选择器
<label>用户名:</label>
<input type="type" name="name" value="zhao" disabled />
<label>密码:</label>
<input type="password" name="name" value="123456" />
<style>
[disabled]{
background-color:#eee;
color:#999;
}
</style>
属性选择器是给所有有该属性的标签元素添加样式
也可以当想要属性为某个特定值的时候的样式，如下
<input type="type" name="name" value="zhao" disabled />
<label>密码:</label>
<input type="password" name="name" value="123456" />
<style>
[type="password"]{
background-color:#eee;
color:#999;
}
</style>
特殊符号的效果：
a[href^="#"表示给以href属性值以#开头的a标签添加样式a[href$="#"表示给以href属性值以#结尾的a标签添加样式
伪类选择器
- 不急于标签和属性定位元素
- 几种伪类
- 状态伪类
- 结构性伪类
状态伪类link visited hover focus
example.com
</a>
<label>
用户名：
<input type="text">
</label>
<style>
a:link {
color: black;
}
a:visited {
color: gray;
}
a:hover {
color: orange;
}
a:active {
color: red;
}
:focus {
outline: 2px solid orange;
}
</style>
解释说明：
- link是指标签为链接时的属性
- visited是指标签为被鼠标访问过的属性
- hover是指标签为鼠标悬停时的属性
- focus是指焦点在标签上时的属性
- active是指鼠标按下一瞬间的属性
结构性伪类 first-child(Dom树，是父级的第一个子级)
<li>阿凡达</li>
<li>泰坦尼克号</li>
<li>星球大战：原力觉醒</li>
<li>复仇者联盟 3</li>
<li>侏罗纪世界</li>
</ol>
<style>
li {
list-style-position: inside;
border-bottom: 1px solid;
padding: 0.5em
}
li:first-child {
color: coral
}
li:last-child {
border-bottom: none;
}
</style>
解释说明：
- li:first-child指li的父级元素ol的第一个子级元素的属性，这样的写法如上可以实现多个li中特定li的属性更改，而不必使用id选择器；
- li:last-child同理指的时li的父级元素ol的最后一个子级元素的属性 7.复合选择器
- 复合选择器的几种类型和实例
- ">"亲子组合
- "+"相邻组合
- 直接组合
- "空格" 后代组合
- "~" 兄弟组合
注意：
选择器的优先级
- 选择器权重（越往下越高）
- 继承或者* 0，0，0，0
- 元素选择器 0，0，0，1
- 类选择器，伪类选择器 0，0，1，0
- ID选择器 0，1，0，0
- 行内样式 1，0，0，0
- ！important 重要的 无穷大
优先级注意点：
- 权重是由4组数字组成，没有进位的
- 可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器
- 等级判断从左向右，如果某一位数值相同，则判断下一位数值
- 继承的权重是0
- a链接浏览器默认指定了一个样式，即蓝色有下划线
权重问题实例：
.nav li{
color:red;
}
.pink{
color:pink;
font-weight:700;
}
/*此时.nav li权重大于 .pink的权重
要想给第一个li颜色改为pink如下
*/
.nav .pink{
color:pink;
font-weight:700;
}
</style>
<body>
<ul class="nav">
<li class="pink">一二三四</li>
<li>一二三四</li>
<li>一二三四</li>
<li>一二三四</li>
</ul>
</body>
常用属性
颜色
— RGB #000000——>rgb（0，0，0）
数字是十进制0-255；顺序为红绿蓝
- HSL
- HUe 色相是色彩的基本属性，如红色、黄色等，取值是0-360.
- Saturation 饱和度是色彩的鲜艳程度，越高越鲜艳，取值范围0——100%
- Lightness 亮度是指颜色的明亮程度；越高颜色月亮，范围是0-100%
- alpha 透明度
字体
可以指定多个字体，因为可能每个设备拥有字体不同，浏览器会自动为设备从前往后选择拥有的字体
- 通用字体族 注：要在最后加上通用字体族，保证设备在没有前面的相关字体时（一定拥有通用字体），不至于预期效果差别太大
使用通用字体族可以使得中文使用中文字体，英文使用英文字体
- 使用web-font 浏览器会尝试先从url中下载字体样式来达到预期展示效果
<style>
@font-face {
font-family: f1;
src: url("//s2.ssl.qhimg.com/static/ff00cb8151eeecd2.woff2") format("woff2");
}
@font-face {
font-family: f2;
src: url("//s3.ssl.qhimg.com/static/a59a90c9e8f21898.woff2") format("woff2");
}
@font-face {
font-family: f3;
src: url("//s2.ssl.qhimg.com/static/58324737c4cb53a5.woff2") format("woff2");
}
h1 {
font-size: 50px;
}
</style>
<h1 style="font-family: f1, serif">落霞与孤鹜齐飞，秋水共长天一色。</h1>
<h1 style="font-family: f2, serif">落霞与孤鹜齐飞，秋水共长天一色。</h1>
<h1 style="font-family: f3, serif">落霞与孤鹜齐飞，秋水共长天一色。</h1>
代码效果：
字体属性具体例子：
- 一些常见属性：
- font-family
<h1>卡尔斯巴德洞窟（Carlsbad Caverns）</h1>
<p>卡尔斯巴德洞窟（Carlsbad Caverns）是美国的
一座国家公园，位于新墨西哥州东南部。游客可以通过天
然入口徒步进入，也可以通过电梯直接到达230米的洞穴
深处。</p>
<style>
h1 {
font-family: Optima, Georgia, serif;
}
body {
font-family: Helvetica, sans-serif;
}
</style>
- 使用建议：
- 字体列表最后协商通用字体族
- 英文字体放在中文字体前面，因为很多中文字体中也会包含英文字母的写法 - font-size - 关键字 small、 medium 、large - 长度 px，em（表示相对大小） - 百分数 相对于父元素的大小
- font-weight表示字重，400表示normal，700表示bold加粗
- line-height，行高，可以通过设置行高来实现文字垂直水平居中效果
/*把a转换为块级元素*/
a{
width:230px;
height:40px;
display:block;
background-color:#55585a;
font-size:14px;
color:#fff;
text-decoration:none;
text-indent:2em;
/*文字行高等于盒子高度实现文字垂直居中*/
line-height:40px;
}
/*单行文字垂直居中的代码*/
/*解决方案：让文字的行高等于盒子的高度*/
/*鼠标经过链接变换背景颜色*/
a:hover{
background-color:orange;
}
</style>
<a href="">手机 电话</a>
<a href="">电视 盒子</a>
<a href="">笔记本 平板</a>
<a href="">出行 穿戴</a>
<a href="">智能 路由器</a>
<a href="">健康 儿童</a>
<a href="">耳机 音响</a>
line-height实现文字垂直居中效果对比：
- font属性简写方式
body{
/* font-style:italic;
font-weight:700;
font-size:16px;
font-family:'Microsoft YaHei';*/
/*复合属性：简写的方式，顺序如下*/
/* font: font-style font-weight font-size font-family;
*/
font:italic 700 16px 'Microsoft yahei';
}
</style>
文本属性
- text-allign对齐方式，两端对齐对最后一行不起作用
- spacing
- text-indent缩进形式
- text-decoration是文本装饰属性，属性值分为
- none 无
- line-through 删除线
- underline 下划线
- overline 上划线
- white-space
- normal 会把多个空格合并一个，自动换行
- nowrap 强制不换行
- pre-wrap 一行内显示不下时会换行，保留原空格格式
- pre-line 保留原换行格式
