css相关知识点

一、CSS的引入方式

1.1 css的介绍

HTML：超文本标记语言。从语义的角度描述页面结构。
CSS：层叠样式表。从审美的角度负责页面样式。
JS：JavaScript 。从交互的角度描述页面行为

CSS：Cascading Style Sheet，层叠样式表。CSS的作用就是给HTML页面标签添加各种样式，定义网页的显示效果。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。

css的最新版本是css3，我们目前学习的是css2.1

1.2 css和html比较：

　　1）html的缺陷　

不能够适应多种设备
要求浏览器必须智能化足够庞大
数据和显示没有分开
功能不够强大

　　2)css的优点　

使数据和显示分开
降低网络流量
使整个网站视觉效果一致
使开发效率提高了（耦合性降低，一个人负责写html，一个人负责写css）

1.3 css的三种引入方式

　　1.3.1 行内样式

　　 <div>
　　　　<p >我是一个段落</p>
　　 </div>

　　1.3.2 内接样式

　　　　<style type="text/css">

   　　　　span{
    　　　　color: yellow;
  　　　　}

　　</style>

　　1.3.3外接样式——>链接式 (常用方式)

　　1.3.4外接样式——>导入式(不常用)

　　　　　　<style type="text/css">
　　　　　　@import url('./index.css');
　　　　　　</style>

二 CSS选择器

CSS选择器分为：

1.基本选择器

2.高级选择器

2.1.标签选择器

CSS样式
a{
    color: gray;
    text-decoration: none;
    display: block;
}

2.2id选择器

# 选中id

同一个页面中id不能重复。
任何的标签都可以设置id
id命名规范要以字母可以有数字下划线 - 大小写严格区分 aa和AA是两个不一样的属性值

#id选择器
#nav_right a:hover{
    color: #eeeeee;
}

2.3类选择器

3.1 所谓类就是class . class与id非常相似任何的标签都可以加类但是类是可以重复,属于归类的概念。

3.2 同一个标签中可以携带多个类，用空格隔开

 1 #类选择器
 2 
 3 .user_input{
 4     margin-top: 50px;
 5     width: 300px;
 6     height: 50px;
 7     float: left;
 8     margin-left:200px;
 9 
10 }
11 .reach_btn{
12     width: 55px;
13     height: auto;
14     margin-top: 50px;
15     float: none;
16     margin-left: 10px;
17 }

classes选择器实例

总结：

不要去试图用一个类将我们的页面写完。这个标签要携带多个类，共同设置样式
每个类要尽可能的小，有公共的概念，能够让更多的标签使用

　　到底使用id还是用class？
　　答案：尽可能的用class。除非一些特殊情况可以用id

　　原因：id一般是用在js的。也就是说 js是通过id来获取到标签

2.2 高级选择器

　　2.2.1后代选择器

　　　　使用空格表示后代选择器。顾名思义，父元素的后代（包括儿子，孙子，重孙子）

.container p{
     color: red;        
 }


.nav_left a:before{
    content: "|";
    color: gray;
    margin: 4px;
}

后代选择器实例

2.2.2子选择器

　　使用>表示子代选择器。比如div>p,仅仅表示的是当前div元素选中的子代(不包含孙子....)元素p。

.nav_left>li {

    float: left;
    margin: 20px;
    height: auto;
}

子选择器实例

2.2.3 并集选择器

猜你喜欢