这是我参与「第四届青训营 」笔记创作活动的第4天
- css作用 用于定义页面元素的样式
-
- 设置字体和颜色
-
- 设置位置和大小
-
- 添加动画效果
- css代码元素
-
- 选择器——用于选择要定义样式的对象
-
- 属性——用于确定改动何种样式
-
- 属性值——即希望的目的属性达到的效果
-
- 声明——属性：属性值;
h1{
color:white;
font-size:14px;
}
- 使用css的三种方法
-
- 外链 更推荐
<link rel="stylesheet" href="/assert/style.css">
-
- 嵌入
<style>
li{margin:0;list-style:none;}
p{margin:lem 0;}
</style>
-
- 内联 有些对象需要单独去定义的情况
<p style="margin:lem 0">aaa</p>
选择器
- 作用 找出页面中的元素，然后设置样式
- 使用方式
-
- 通配选择器 *{}
*{margin:0;padding:0;}
-
- 标签选择器 标签{}
h1{color:red;}
-
- id选择器 id一般来说是唯一的，但也可以有多个，可能会引发不预期的效果 #id名{}
<style>
#a{color:red;}
</style>
<h1 id="a">aaa</h1>
-
- 类选择器 对同一类设置属性 可以出现多次 比较常用 .类名
<style>
.b{text-decoration:line-through;}//删除线
</style>
<p class="b">a</p>
<h1 class="b">b</h1>
-
- 属性选择器 通过元素的属性或属性值去选择元素 [属性]{}或[属性="属性值"]{}
<input value="zhao" disabled/>//disabled表示该表单项是被禁用的，无法选中
<input type="password" value="12345"/>
<style>
[disabled]{//用属性的情况下
background:#eee;
color:#999;
}
input[type="password"]//用属性值的情况下
{
color:red;
}
</style>
-
-
- 对属性值不止可以要求一个具体的值，也可以是个条件
-
a[href=^="#"]{//对象是a标签中href的开头是#
color:red;
}
a[href$=".jpg"]{//对象是a标签中href是以.jpg为结尾的
color:blue;
}
-
- 伪类 不基于标签和属性定位元素
-
-
- 状态伪类 需要元素处于某一种特定的状态
-
<a href="#">一个链接</a>
<style>
a:link{color:black;}//默认状态，即当前所处状态
a:visited{color:gray;}//访问过，点过的状态
a:hover{color:orange;}//鼠标移动到链接上面后
a:active{color:red;}//鼠标点击时
</style>
-
-
- 结构伪类 根据dom树中出现的位置选择对象
-
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
<style>
li:first-child{//第一个li，即1会变红
color:red;
}
li:last-child{//最后一个li，即4会变蓝
color=blue;}
</style>
组合
- 选择器组
body,h1,h2{//直接用逗号分隔开，表示都需要被选中
margin:0;padding:0;
}
对文本进行格式化
- 颜色-RGB 通过指定红绿蓝三种颜色的数量多少来确定最终颜色
-
- #000000 十六进制，每两位分别表示三种颜色的数量
-
- rgb(12,13,14) 每一个值代表三种颜色的数量
- 颜色-hsl(x,y,z)
-
- x代表h，即色相的值，是色彩的基本属性，取值为0~360，什么什么色，红色蓝色等等
-
- y代表s，即饱和度的值，是颜色的鲜艳程度，取值为0~100%
-
- z代表l，即亮度的值，是颜色的明亮程度，取值为0~100%
- 用关键字指定颜色 如blue ，red等
- alpha透明度 从0——1代表越来越不透明，1即不透明
-
- #112233xx xx∈[00,ff]
-
- rgba(x,y,z,a) a是透明度值，0~100%
-
- hsla(x,y,z,a) a是透明度值，0~100%
- 字体 font-family
h1{
font-family:Optima,Georgia,serif;//多个字体按逗号隔开排列是为了让浏览器从前到后挑选有的字体，最后一个serif是一个通用字体族
}
-
- 五类通用字体族 当使用了font-family时记得在最后一个加上一个通用字体族，通用字体族不代表某一个确定字体，是一种风格
-
- 关于字体排列顺序，建议先英文后中文
-
- 关于web-font 作用在于可以使用特定要求的字体，浏览器会先从给出的网址里下载字体来使用 缺点：空间耗费会较大，用的时候可以对字体进行裁切，减少空间消耗
- 字体大小 font-size
-
- 关键词：small medium large
-
- 长度：px em
-
- 百分数 相对于父元素字体的大小
<section>
<h2>A web font example</h2>
<p class="note">Notes: Web fonts</p>
</section>
<style>
section{
font-size: 20px;
}
section h1{
font-size: 2em;//section里的h1的大小为section的两倍，即40px
}
section .note{
font-size: 80%;//section里class为note的字体大小为section的80%，即16px
color:orange;
}
</style>
- 字体效果 font-style 例如斜体
- 字体粗细 font-weight 数值为从100到900，越来越粗
-
- 关键字 normal-400 bold-700
-
- 能否产生效果要看当前字体是否设计了该种粗细状态
- line-height 行高
-
- 当用了一个无单位的数值时，行高是字体自身大小的多少倍，如1.6表示是字体大小的1.6倍
- 以上属性值都可以写在一个标签——font里
- white-space 处理空白符
-
- normal 默认将所有连续空格与换行符合并成一个
-
- nowrap 强制不换行
-
- pre 保留所有的空格和换行
-
- pre-wrap 一行内显示不下时自动换行，且保留空格和换行
-
- pre-line 合并空格，保留换行
