初识CSS

一.CSS
Cascading Style Sheet 级联样式表

1.表现HTML或XHTML文件样式的计算机语言
2.包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定

二.css的优势：

1.内容与表现分离
2.网页的表现统一，容易修改
3.丰富的样式，使得页面布局更加灵活
4.减少网页的代码量，增加网页的浏览速度，节省网络带宽
5.运用独立于页面的CSS，有利于网页被搜索引擎收录

三.css语法基本结构：
选择器{

声明1;

声明2;
}

h1 {

font-size:12px;
color:#F00;
}

四.三种样式：
1.行内样式
<h1 style="color:blue;font-size: 10px;">今天可能下冰雹</h1>

行内样式有style属性控制，双引号中间的内容就是样式列表，且内个样式用分号分割

2.内部样式表

在<head></head>标签中写<style type="text/css"></style>

<head lang="en">
<meta charset="UTF-8">
<title>内部样式效果</title>
<style type="text/css">
h1{
color: green;
font-size: 100px;
}
</style>
</head>

注意：将全部符合条件的标签全部变样式

3.外部样式表
需要创建.css文件
style.css
h1{
color: aqua;
font-size: 15px;
}
在HTML文件当中引用样式
链接式：<link href="文件路径" rel="stylesheet" type="text/css"/>
导入式：<style type="text/css">

@import "文件路径";

</style>

4.链接式和导入式的区别

4.1<link/>标签属于XHTML，@import是属于CSS2.1
4.2使用<link/>链接的CSS文件先加载到网页当中，再进行编译显示
4.3使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中
4.4@import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的

5.样式优先级
1.行内样式>内部样式表>外部样式表
2.就近原则

6.三种基本选择器

6.1 标签

<h1>p和h1有什么区别</h1>
h1 {
color: green;
}

6.2 class选择器
<h1 class="Z">说p和h1有什么区别</h1>
.Z{
color:yellow;
}
6.3 id选择器
<h1 id="ZJ">说p和h1有什么区别</h1>
#ZJ{
color：black;
}
遵循id>class>标签，注意，id不能重复

7.层次选择器

7.1 /*后代选择器*/
body p{
background: yellow;
}
body标签下的所有p标签都要变

7.2 /*子类选择器*/
body>p{
background: blue;
}
只有body下的p变，其他包含p的不变

7.3/*相邻兄弟选择器*/

.active+p{
background: green;
}
定位class为active相邻的第一个p变

7.4/*通用选择器*/
.active~p{
background: red;
}

8.结构伪类选择器
<style type="text/css">
/*定位ul下的第一个li*/
ul li:first-child{
background: yellow;
}
/*定位ul下的最后一个li*/
ul li:last-child{
background: blue;
}
/*定位第三个p*/
p:nth-child(3){
background: green;
}
/*定位第一个p*/
p:first-of-type{
background: red;
}
/*定位指定位置的p*/
p:nth-of-type(2){
background: blueviolet;
}
</style>

E:first-child 作为父元素的第一个子元素的元素E
E:last-child 作为父元素的最后一个子元素的元素E
E F:nth-child(n) 选择父级元素E的第n个子元素F，（n可以是1、2、3），关键字为even、odd
E:first-of-type 选择父元素内具有指定类型的第一个E元素
E:last-of-type 选择父元素内具有指定类型的最后一个E元素
E F:nth-of-type(n) 选择父元素内具有指定类型的第n个F元素

9.属性选择器
<style type="text/css">
.demo a {
float: left;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
text-align: center;
background: #aac;
color: blue;
font: bold 20px/50px Arial;
margin-right: 5px;
text-decoration: none;
margin: 5px;
}
/*属性*/
a[id]{
background: red;
}
/*属性值*/
a[href=efc]{
background: yellow;
}
/*属性开头*/
a[href^=s]{
background: orange;
}
/*属性结尾*/
a[target$=k]{
background: palevioletred;
}
/*属性包含*/
a[href*=a]{
background: purple;
}
</style>

E[attr] 选择匹配具有属性attr的E元素
E[attr=val] 选择匹配具有属性attr的E元素,并且属性值为val（其中val区分大小写）
E[attr^=val] 选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串
E[attr$=val] 选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串
E[attr*=val] 选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”，换句话说，字符串val与属性值中的任意位置相匹配

猜你喜欢