CSS基础一
什么是css?
css:层叠样式表
网页一层一层的。
而css就可以分别为网页的各层设置样式。
css样式编写放在那里?
-
(内联样式)放在元素的style属性中。给谁设置写在那个标签里面。
也称为:内联样式,只对当前的元素中的内容起作用。
内联样式不方便复用,不推荐使用。
内联样式属于结构与表现耦合,不方便后期的维护,不推荐使用。
<p style="color:red;font-size:100px;">锄禾日当午,旱地和吓唬</p>
-
(内部样式)将css样式编写在head中的style标签里,然后通过css选择器选择指定元素,然后可以同时为这些元素一起设置样式,这样可以使样式进一步的复用。
将样式表编写到style标签中,也可以使表现和结构进一步分类,使表现和结构进一步分离,推荐使用方式。
<style type="text/css"> p{ color:red; font-size:100px; } </style>
-
(外部样式)表
将样式表编写到外部的css文件中。
编写外部样式css文件
-
引入外部css样式文件到当前html中。
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>css入门</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <p>锄禾日当午,旱地和吓唬</p> <p>创建明月光,疑似地上霜</p> </body> </html>
- 将css样式统一编写到外部样式表中,完全使结构和表现完全分离,可以使样式表在不同的页面中使用。
- 最大限度是样式复用。
- 通过link标签引入,可以利用浏览器的缓存加快用户访问的速度提高用户体验。所以在开发中最推荐的方式是外部样式表。
css注释
/* 注释内容 */
选择器
通过选择器可以选中页面中指定的元素,并且将声明块中的样式应用到选择器对应的元素上。
声明块
声明块紧跟在选择器的后边,使用对{}括起来,声明块中实际上就是一组一组的明值对结构,这一组一组的明值对我们称为声明。
在一个声明块中可以写多个声明,多个声明之间使用;隔开。声明的样式名和样式值之间使用:来连接
p{ color:red; font-size:100px; }
开发工具hbulder
推荐使用的开发工具,见官网文档。
div 块元素
- 所谓的块元素就是会独占一行的元素。
- 无论他的内容有多少,都会独占一整行。
- div标签没有任何语义,不会为他里面的元素设置任何的默认样式。
- div元素主要用来对网页布局的。
<div style="background-color: red; width: 100px;">one div</div> <div style="background-color: blue; width: 100px;">two div</div>
常见块元素
div、p、h1、h2、h3.。。。
内联元素(行内元素)
span:没有任何语义,专门用来选中文字,然后为文字设置样式。
内联元素:只占自身大小,不会占用一行。
常见内联元素
a、img、span、iframe
块元素与内联元素区别
块元素:主要用来布局。
内联元素:主要用来选中文本,设置文本样式。
一般请款告知使用块蒜素去包含内联元素,二不会使用内联元素去包含块元素。
a元素可以包含任意元素
,但是除了它本身。
p元素不能包含任何块元素
常用选择器
-
元素(标签)选择器
作用:可以选择页面中的所有指定元素。
p{ color:red; font-size:100px; }
-
id选择器
通过元素的id属性值选中唯一的一个元素。
语法:
#p1{ color: green; font-size: 300px; }
-
类选择器
可以为元素设置class属性,class属性和id属性类似,只不过class属性可以重复。
用户相同class属性的元素,称为一组元素。
通过元素的class属性,选中一组元素。
<!doctype html> <html> <head> <meta charset="utf-8"/> <title>css03</title> <style> p{ color:red; font-size:100px; } #p1{ color: green; font-size: 200px; } .p1{ color:greenyellow; } .hello{ color: #9932cc; font-size: 60px; } </style> </head> <body> <p>ggggg</p> <p>ggggg</p> <p id="p1">ggggg</p> <p class="p1 hello">ggggg</p> <p class="p1">ggggg</p> </body> </html>
class可以同时为一个元素设置多个class属性值,多个值之间用空格隔开。
-
-
选择器分组
通过选择器分组可以同时选中多个选择器对应的元素。
语法:选择器1,选择器2,选中n{}
<!doctype html> <html> <head> <meta charset="utf-8"/> <title>css03</title> <style> p{ color:red; font-size:100px; } #p1{ color: green; font-size: 200px; } .p1{ color:greenyellow; } .hello{ color: #9932cc; font-size: 60px; } #p1,h1,.p2{ background: gold; } </style> </head> <body> <h1>fd</h1> <p class="p2">fdfd</p> <p>ggggg</p> <p id="p1">ggggg</p> <p class="p1 hello">ggggg</p> <p class="p1">ggggg</p> </body> </html>
-
通配选择器
可以用来选中页面中的所有元素
*{ color:red; font-size: 90px; }
- 复合选择器(交际选择器)
作用:可以选中同时满足多个选择器的元素
span.p3{ color: #00008b; }
span与p3中间没有空格。
对id选择器来说,不建议使用复合选择器。