CSS 的使用方式 ()
1. 行内样式 (内联样式)
< 标签 ></ 标签 >
2. 页面嵌入 (内部样式表)
在 head 标签里面增加一个子标签
<style>
选择器 {
属性名 1: 属性值 1;
属性名 2: 属性值 2;
- ......
- }
- </style>
3. 外部文件 (外部样式表)
在 head 标签里面增加一个子标签
<link rel="stylesheet" href="css 文件的路径" />
4. 外部导入样式
主要用在样式初始化. 因为有一些标签有自己的样式, 我们需要清空, 方便自己计算
- *{
- margin: 0;
- padding: 0;
- }
CSS------ 选择器
ID 选择器
使用 id 选择器: 在元素上面增加一个 id 属性, id 属性的属性值不用用数字开头
一个页面中只能有一个 id 属性值
CSS 中 id 选择的表示方法用 # 表示
class 选择器
使用 class 选择器: 在元素上增加一个 class 属性, class 属性的属性值不能用数字开头
一个页面中可以有多个 class 属性值
CSS 中 class 选择器的表示方法用 . 表示
标签选择器
直接写标签名
组合选择器
选择器直接用, 分隔开即可
子代选择器
> 只针对子代
后代选择器
用空格表示, 包含着子代选择器
通用选择器
* 针对于所有的标签
选择器是有权重的
内联样式 1000
id 100
class 10
元素 1
通用 0
boss !important 只要出现, 就以这个为主
- text-align: right; /* 文本对齐方式 */
- text-decoration: underline; /* 文本下划线 */
- line-height: 166.67px; /* 文本的行高 *//* 一行文字所占的高度, 让他上下居中 */
- font-family: "字体"; 设置字体的样式
- font-style: ; /* 规定字体是否倾斜 */
font-weight: bold; 加粗
font-size: 16px ; /* 设置字体的大小 */
在浏览器中, 默认的字体大小 16px
谷歌浏览器中, 字体大小最小可以为 12px
火狐没有限制
:hover 叫伪类选择器
当你的鼠标放上去的时候, 会变化成的样子权值 10
无序列表:
- <ul type="">
- <li>
- 英语
- </li>
- <li>
- 语文
- </li>
- <li>
- 数学
- </li>
- <li>
- 政治
- </li>
- <li>
- 地理
- </li>
- </ul>
- background-color: rgba(255,0,0,0.1); /* 最后一个参数 a 表示透明度, 取值的范围是 0-1 之间,
- 可以为 0 和 1*/ /* 只表示背景颜色 */ background-color: #f00; opacity: 0.1; /* 取值的范围是
- 0-1 之间, 可以为 0 和 1*/ /* 表示整个元素 */
来源: http://www.bubuko.com/infodetail-3076287.html