CSS基础知识——常用基础命令

1.层叠样式表CSS (Cascading Style Sheets).

2.引入方式

2.1内部样式表：写在 style 标签中. 嵌入到 html 内部.

2.2行内样式表：style属性

2.3外部样式

3样式相关

4.选择器

4.1基础选择器: 单个选择器构成的

4.2复合选择器:组合多个基础选择器

5.常见属性

1.层叠样式表CSS (Cascading Style Sheets).

对网页中元素位置的排版进行像素级精确控制, 实现美化页面，做到页面的样式和结构分离.CSS 不区分大小写, 一般统一使用小写

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p {/* s设置字体颜色、大小 */color: red;font-size: 15px;}</style></head>
<body><p>hello world</p>
</body>
</html>

注意！！！

CSS 要写到 style 标签中

style 标签可以放到页面任意位置. 一般放到 head 标签内.

CSS 使用 /* */ 作为注释. ( ctrl + /) .

2.引入方式

行内样式优先级>>内部样式，也即是style属性优先级高于style标签

2.1内部样式表：写在 style 标签中. 嵌入到 html 内部.

2.2行内样式表：style属性

行内样式优先级 >> 内部样式，也即是style属性优先级高于style标签，代码如下

    <!-- style标签：内部样式 --><style>p {/* s设置字体颜色、大小 */color: rgb(255, 98, 0);font-size: 15px;}</style></head>
<body><!-- 此处style是属性（行内样式），优先级高于上面的style标签，因此页面字体颜色是黑色 --><p style=color:black> hello world</p>
</body>

2.3外部样式

创建一个 css 文件style.css----->(存放样式，不把样式写在源文件)

源文件demo.html中------>使用 link 标签引入 css

link标签引入一个外部CSS，herf属性描述了CSS的位置，rel属性：引入文件类型（stylesheet：样式表）；CSS文件rel属性默认样式表stylesheet：

demo.htm:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>外部样式</title><link rel="stylesheet" href="style.css">
</head>
<body><div>文字部分可发现变化</div></body>
</html>

style.css文件：

div {color:red;
}

优点: 样式和结构彻底分离了.
缺点: 受到浏览器缓存影响, 修改之后不一定立刻生效.

3样式相关

（1）代码展开写：方式二

 /*  方式一 */
p { color: red; font-size: 30px;}/*  方式二 */
p {color: red;font-size: 30px;
}

（2）空格规范：

冒号后面带空格
选择器和 { 之间也有一个空格

4.选择器

4.1基础选择器: 单个选择器构成的

（1）标签选择器：

直接写出标签名，如下代码所示：p标签的内容（猫）都会被设置为红色，而div标签（狗）为绿色

快速为同一类型的标签都选择出来.
但是不能差异化选择（范围太大，一个标签内所有内容都设置为一种，不能对重点部分进行区分）

<style>
p {color: red;
}
div {color: green;
}
</style><p>猫</p><div>狗</div>

（2）类选择器：

差异化表示不同的标签
可以让多个标签的都使用同一个标签.

创建“类”（元素的class属性，不是java中的的类）分类效果，利用其指定需要做差异化的部分

    <style>.blue {color: blue;}</style><div>猫咪cat</div><div class="blue">猫咪cat</div>   这里添加了class属性，因此这里的内容为blue蓝色<div>猫咪cat</div>

类名用 . 开头的
下方的标签使用 class 属性来调用，如 class="blue"
一个类可以被多个标签使用, 一个标签也能使用多个类(空格分割)

（3）多个类的使用：

一个类可以被多个标签使用，一个标签可以有多个类

    <style>.box {width: 20px;height: 15px;}.red {background-color: red;}.green {background-color: green;}</style><div class="box red"></div><div class="box green"></div><div class="box red"></div>

（4）id 选择器：和类选择器类似.

CSS 中使用 # 开头表示 id 选择器
id 选择器的值和 html 中某个元素的 id 值相同
html 的元素 id 不必带 #
id 是唯一的, 不能被多个标签使用 (是和类选择器最大的区别)

<style>#fish {color: red;}
</style><div id="fish">hahahhaahahahah</div>

（5）通配符选择器：*

页面的所有内容都会被改成红色（很少使用，一般用于消除浏览器默认样式(清空内外边距)）

* {color: red;background-color：gray;
}

4.2复合选择器:组合多个基础选择器

（1）后代选择器
又叫包含选择器. 选择某个父元素中的某个子元素.（父子之间使用空格分割）

    <style>
/* 后代选择器*/ol li {color: red;}.list a {color:blue;}</style></head>
<body><ul><li>无序列表</li><li>无序列表</li></ul><ol>
/* 这部分内容为红色red */<li >有序列表</li><li>有序列表</li><li><a href="#">有序列表</a></li></ol>
</body>
</html>

(2)子选择器

使用大于号(>)分割
只选亲儿子, 不选孙子元素

<style>.cat ul li a {color: tomato;}
</style><div class="cat"><ul><li><a href="#">小猫</a></li><li><a href="#">小猫</a></li><li><a href="#">小猫</a></li></ul></div>

(3)并集选择器

元素1, 元素2 { 样式声明 }：

一次选中多个标签(标签1和标签2同时设置为一个样式：属性：值)

通过逗号分割等多个元素.
表示同时选中元素 1 和元素 2
任何基础选择器都可以使用并集选择器.
并集选择器建议竖着写. 每个选择器占一行. (最后一个选择器不能加逗号）

/* 四个标签都是红色*/
div,
h3,
ul>li {color: red;
}/* div和h3标签是红色 */
div, h3 {color: red;
}<div>苹果</div>
<h3>香蕉</h3>
<ul><li>鸭梨</li><li>橙子</li>
</ul>

（4）链接伪类选择器：和<a>标签搭配使用（带冒号：）

a:link 未被访问过的链接
a:visited 已被访问过的链接
a:hover 鼠标指针悬停上的链接
a:active 活动链接(鼠标按下了但是未弹起)

 <style>a:link {color: black;/* 去掉 a 标签的下划线 */text-decoration: none;}a:visited {color: green;}a:hover {color: red;}a:active {color: blue;}
</style><a href="http://www.baidu.com">百度超链接文本</a>

上述代码表示的意思是：

页面有内容“百度超链接文本”，首次加载页面显示的是link对应的属性black·；当再次点击链接为visited属性绿色（链接地址颜色）；鼠标放在文本上则是hover属性；左键按下鼠标但是不放手则是activate属性

（5） :force 伪类选择器

选取获取焦点的 input 表单元素.（此时被选中的表单的字体就会变成红色.）

<div class="three"><input type="text"><input type="text"><input type="text"><input type="text"></div><style>.three>input:focus {color: red;}
</style>

5.常见属性

设置字体 .font-family；字体大小 .font-size ；alpha:透明度（不透明1---->透明0）

<style> <div> {font-size:15px;color:rgb(0,255,0,0.3);}</div>
</style>

<style>.font-family .one {font-family: 'Microsoft YaHei';}.font-family .two {font-family: '宋体';}
</style>
<div class="font-family"><div class="one">这是微软雅黑</div><div class="two">这是宋体</div>
</div>

粗细 font-weight:

可以使用数字表示粗细.
700 == bold, 400 是不变粗, == normal
取值范围是 100 -> 900

<style>.font-weight .one {font-weight: 900;}.font-weight .two {font-weight: 100;}
</style><div class="font-weight"><div class="one">粗粗粗</div><div class="two">细细细</div></div>

文字样式：font-style: italic（倾斜）；font-style: normal（正常）;

文本对齐：text-align:center（center居中对齐；left 左对齐；righ右对齐）

文本装饰：text-decoration:（underline 下划线. ）

文本缩进：text-indent （单位px或者em）,缩进可以是负数

行高：line-height: [值];（normal，基于浏览器Chrome21px）

背景颜色:background-color: [指定颜色]

背景图片:background-image: url("输入图片路径");

背景颜色和背景图片可以同时存在. 背景图片在背景颜色的上方

背景位置：background-position: x y;

方位名词: (top, left, right, bottom)
精确单位: 坐标或者百分比(以左上角为原点)
混合单位: 同时包含方位名词和精确单位

<style>.bgp .one {background-image: url(rose.jpg);height: 500px;background-repeat: no-repeat;background-color: purple;background-position: center;}
</style>
<div class="bgp"><div class="one">背景居中</div>
</div>

背景尺寸：background-size: length|percentage|cover|contain;

可填具体的数值: 如 40px 60px 表示宽高
也可以填百分比: 按照父元素的尺寸设置.
cover: 把背景图像扩展至足够大，背景图像完全覆盖背景区域。
把图像图像扩展至最大尺寸，使 宽高完全适应内容区域.

圆角矩形：border-radius: length（length：内切圆半径;border:边框）---> ------------>border-radius 使边框带圆角效果.

生成圆形：让 border-radius 的值为正方形宽度的一半

div {width: 200px;height: 200px;border: 2px solid green;border-radius: 100px;
/* 或者用 50% 表示宽度的一半 */border-radius: 50%;
}

生成圆角矩形：border-radius 的值为矩形高度的一半

div {width: 200px;height: 100px;border: 2px solid green;border-radius: 50px;
}