01.22 CSS基础
2019-01-22 本文已影响0人
xxxQinli
1. 什么是CSS(层叠样式表，简称样式表)
- CSS是web标准中的表现标准，主要用来设置网页内容的布局和样式
2. 怎么写CSS(语法)
-
a. 语法
选择器{属性名1:属性值1;属性名2:属性值2...} -
b. 说明
选择器 - 选中想要设置样式的标签 -
{} - 固定写法
属性 - 属性名和属性值用冒号连接，多个属性之间用分号分开(如果没有分号，会导致后面的样式无效)
属性名必须是CSS给我们提供的属性(大概两百多个) -
属性值：表示大小的数值必须加单位，px - 像素，em - 空格数，也可以使用百分比(相对父标签)，100%,200%
-
c. 常用属性
color - 字体颜色
background-color - 背景颜色
font-size - 字体
width - 宽度
height - 高度
3. CSS写在哪儿
- a.内联样式表: 将样式表写在标签的style中; 注意，这种样式表不需要写“选择器{}”，直接给属性赋值
- b.内部样式表: 将样式表写在style标签中(这个标签可以放在head中，也可以放在body中)
- c.外部样式表: 将样式表写在一个CSS文件中，然后在head中通过link导入
- link标签 - 导入外部文件
- rel属性 - 导入的文件的作用，stylesheet - 样式表，icon - 网页图标
- type属性 - 导入的文件的类型说明，类型/文件后缀，text/css - 导入一个文本文件，文件后缀是css
- href属性 - 文件路径
优先级：内联样式表最高，内部和外部谁后写谁的优先级高
4. CSS中的值
- 颜色：颜色的英文单词，#16进制颜色值，rgba(红, 绿, 蓝, 透明度:0-1)
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>CSS基础</title>
<link rel="stylesheet" type="text/css" href="css/CSS基础.css">
<link rel="icon" type="img/ico"href="css/jd_logo.ico">
<style type="text/css">
div{
background-color: green
}
p{
color: blue
}
</style>
</head>
<body>
<div style="color: rgba(0,0,255,1); font-size:20px">
我是div1
</div>
<p>我是段落</p>
<div id="">
我是div2
</div>
</body>
</html>
