前端学习 -- Css
Css:Cascading Style Sheets
CSS叫做层叠样式表，用来设置页面中元素的样式。背景颜色、字体颜色、字体大小。。。
编写位置：
1，内联样式：
将样式编写到标签的style属性中
<p style="color:red;"></p>
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>超链接</title> </head> <p style="color:red;"> 风起檐飞雪 沟壑巧遁形 置身大漠里 踏浪烟波中 </p> </html>
效果：
如果对其他标签起作用，内联样式就需要复制到其他标签去，这样就显得比较麻烦，无法复用，不易维护。
2.内部样式表
将样式表编写到head中的style标签中
<style type="text/css"></style>
使用内部样式表，进一步将表现和结构分离，可以同时为多个元素设置样式，方便后期的维护
如下对所有的P元素进行样式设置，实现样式的复用
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>雪后漫步</title> <style type="text/css"> P{ color:red;font-size:20px; } </style> </head> <p> 风起檐飞雪 沟壑巧遁形 </p> <p> 置身大漠里 踏浪烟波中 </p> </html>
效果：
缺点：比如我有多个html文件想要公用同一样式，如上两种方式就无法解决，引出如下的实现方式。
3.外部样式表
将样式表编写到外部的CSS文件中，然后通过link标签将外部文件引入
<link rel="stylesheet" type="text/css" href="文件的路径"/>
将样式编写到外部样式表中，可以在不同的页面中使用同一个样式表，完全将表现和结构分离，方便后期的维护，推荐使用的方式
分别定义两个文件：
- style文件
- html文件
style.css文件：
P { color: green; font-size: 20px; }
Demo1.html:
<!doctype html> <html> <head> <meta charset="utf-8"/> <title>雪后漫步</title> <!-- <style type="text/css"> P{ color:red;font-size:20px; } </style>--> <link rel="stylesheet" type="text/css" href="style.css"> </head> <p> 风起檐飞雪 沟壑巧遁形 </p> <p> 置身大漠里 踏浪烟波中 </p> </html>
效果：
Css基本语法：
Css注释：作用和HTML注释类似，只不过它必须编写在style标签中，或者是css文件中
/*
*/
CSS的语法：
选择器{
声明块1;
声明块2;
}
选择器：
通过选择器可以选中页面中指定的元素，
并且将声明块中的样式应用到选择器对应的元素上
声明块：
声明块紧跟在选择器的后边，使用一对{}括起来，
声明块中实际上就是一组一组的名值对结构，
这一组一组的名值对我们称为声明，
在一个声明块中可以写多个声明，多个声明之间使用;隔开，
声明的样式名和样式值之间使用:来连接。
如：选择器就是p,声明块就是{}包住的地方。
P { color: green; font-size: 20px; }
块元素，内联元素
div就是一个块元素
所谓的块元素就是会独占一行的的元素,无论他的内容有多少
他都会独占一整行。
p h1 h2 h3 ...
div这个标签没有任何语义，就是一个纯粹的块元素，
并且不会为它里边的元素设置任何的默认样式，
div元素主要用来对页面进行布局的
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="css/new_file.css" /> </head> <body> <div style="background-color: black;color: white;">春眠不觉晓</div> <div style="background-color: green;color: red;">春眠不觉晓</div> </body> </html>
span是一个内联元素（行内元素）
所谓的行内元素，指的是只占自身大小的元素，不会占用一行
常见的内联元素：
a img iframe span
span没有任何的语义，span标签专门用来选中文字，然后为文字来设置样式
块元素主要用来做页面中的布局，内联元素主要用来选中文本设置样式，
一般情况下只使用块元素去包含内联元素，而不会使用内联元素去包含一个块元素
a元素可以包含任意元素，除了他本身
p元素不可以包含任何块元素
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="css/new_file.css" /> </head> <body> <span>春眠不觉晓</span> <span style="color:red;font-size: 20;">处处闻啼鸟</span> </body> </html>
子元素和后代元素选择器
元素之间的关系
- 父元素：直接包含子元素的元素
- 子元素：直接被父元素包含的元素
- 祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素
- 后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素
- 兄弟元素：拥有相同父元素的元素叫做兄弟元素
<div id="d1"> <span>我是div标签中的span</span> <p><span>我是p标签中的span</span></p> </div> <div> <span>我是body中的span元素</span> </div>
为div中的span设置一个颜色为绿色
后代元素选择器
- 作用：
- 选中指定元素的指定后代元素
- 语法：
祖先元素 后代元素{}
#d1 span{ color: greenyellow; }
为div的子元素span设置一个背景颜色为黄色
子元素选择器
- 作用：
- 选中指定父元素的指定子元素
- 语法：
父元素 > 子元素
IE6及以下的浏览器不支持子元素选择器
div > span{ background-color: yellow; }
