css初识

CSS初识

css可以理解为是用来装饰html标签的，本来丑丑的，通过用了css，就变得美丽动人了。

学习一门语言 首先要知道它的注释

/*这是注释.多行的话你就多按几下enter*/

css的语法结构

css的引入方式有三种，前两者使用较多。第三者的耦合度太高，不利于后期维护。

css的语法结构为
选择器 {
    属性1：值1;
    属性2：值2;
    属性3：值3;
    属性4：值4;
}

# 在html中，引用css的方式一共有三种：
1. 在head标签内使用style标签来引入css。
<style> h1 {属性1：值1}</style>

2. 在head标签内使用link标签引入css外部文件
<link rel='stylesheet' href='css的外部文件'>

3. 在要使用的标签内直接定义style属性。
<h1 style='属性1：值1'>我这是标题</h1>

css的选择器

1. id选择器:起手式为# 通过id找到对应的标签，然后更改样式
<style> #id {属性1：值1;} </style> 

2. 类选择器：起手式为. 定义一个类名，所有使用class继承这个类的标签都是用这个标签的样式。
<style> .类名 {属性1：值1;} </style>

3.元素（标签）选择器：所有的该标签都使用这个样式
<style> 标签名 {属性1:值1;} </style>

4.通用选择器：将所有的标签采用统一的样式
<style> * {属性1：值1;} </style>


注意：同一个style内可以包含多个选择器。

组合选择器

后代选择器：标签内部的其他标签全是后代标签
A a {属性1：值1;}    A下的所有后代中是a的全部使用这个样式

儿子选择器：标签内部第一层级的标签被称为儿子标签
A>b {属性1：值1;}    A的所有儿子是b的使用的css

毗邻选择器：跟自己标签在同一级别的下边紧挨着的标签
A+B {属性1：值1;}    A的毗邻B使用的css

弟弟选择器：同级别晚出生于自己的所有标签
A~C {属性1：值1;}    A所有弟弟使用的样式

属性选择器

属性选择器是用[]来作为标识的
1.含有某个属性。
[username] {属性1:值1;}  所有含有username属性的标签都是用css

2.含有某个属性并且有某个值
[username='tom'] {属性1:值1;}   属性名是username 且值为tom

3.含有某个属性且有某个值的某个标签
input[username] {属性1:值1;}   找到所有属性名是username，值为tom的input标签