CSS学习笔记

CSS学习笔记

1、CSS2,2.1,3

CSS2.0 div+CSS，html与css分离的思想

css2.1 浮动，定位

css3.0 圆角，阴影，动画。。。

2、css的优势

• 内容与表现分离
• 网页结构表现统一，可以实现复用
• 样式十分的丰富
• 建议使用独立于html的css文件
• 利于SEO，容易被搜索引擎收录

3、三种导入方式

• 行内（标签内属性）
• 内部样式（style标签）
• 外部样式（文件）

行内>内部>外部样式(就近原则)

外部样式的两种写法：

1、链接

<link rel="stylesheet" href=""></link>

2、导入(在style中)

<style>
@import url（""）
</style>

4、选择器

选择页面上的某个元素

4.1、标签选择器

会选择所有指定标签，只能放基本的通用样式

4.2、类选择器

选中同类名的，一组标签。

<style>
    .classname{
   
        
    }
</style>

4.3、ID选择器

id要唯一

#idname{
   

}

d选择器>类选择器>标签选择器

4.4、层次选择器

• 后代选择器

在某个元素的后面。eg.body后面有p

body p{
   
    
}

• 子选择器(第一代儿子)

body>p{
   
    
}

• 相邻兄弟选择器

只有一个，下面的那一个元素。

div1 + div2{
   

}

• 通用选择器

当前选中元素的所有向下兄弟元素

div1 ~ div2{
   

}

border-radius: 24px;//圆角

4.5、结构伪类选择器

//第一个和最后一个
ul li:first-child{
   
    
}
ul li:last-child{
   
    
}

:hover



// 选中当前p元素的父级元素，进而选中父级元素的第一个，并且选中的元素是当前元素（p）
p:nth-child(1){
   
    
}
//选中父元素下的p元素的第二个，类型
p:nth-of-type(1){
   
    
}

4.6、属性选择器（常用）

id和class结合

//a标签中带有id属性的
a[id]{
   
    
}
//a标签中id=nm的
a[id=nm]{
   
    
}

//语法：属性名 = 属性值（正则）
//=绝对等于
//*=包含
//^=以什么开头
//$= 以什么结尾

a[class *= "links"]{