CSS笔记（一）

CSS

选择器

基本选择器

标签选择器

顾名思义就是通过标签名来选择元素：

示例：

p {
  color: red;
}

将所有的p标签设置字体颜色为红色。

不管标签藏的多深，都能选中
选中的是所有的，而不是某一个，所以说 “共性” 而不是 ”特性“

ID选择器

通过元素的ID值选择元素：

示例：

#i1 {
  color: red;
}

将id值为i1的元素字体颜色设置为红色。

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

类选择器

1. 所谓类 就是class . class与id非常相似 任何的标签都可以加类
   但是类是可以重复 归类

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

通过样式类选择元素：

示例：

.c1 {
  color: red;
}

将所有样式类含.c1的元素设置字体颜色为红色。

小结

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

到底使用id还是用class？
答案：尽可能的用class。除非一些特殊情况可以用id
原因：id一般是用在js的。也就是说 js是通过id来获取到标签

通用选择器

不推荐使用，性能比较差
使用*选择所有元素：

* {
  color: black;
}

---

组合选择器

后代选择器

因为HTML元素可以嵌套，所以我们可以从某个元素的后代查找特定元素，并设置样式：

div p {
  color: red;
}

从div的所有后代中找p标签，设置字体颜色为红色。

儿子选择器

div>p {
  color: red;
}

从div的直接子元素中找到p标签，设置字体颜色为红色。

毗邻选择器

div+p {
  color: red;
}

找到所有紧挨在div后面的第一个p标签，设置字体颜色为红色。

弟弟选择器

div~p {
  color: red;
}

找到所有div标签后面同级的p标签，设置字体颜色为红色。

交集选择器

h3{
   width:300px;
   color: red;
}

.active{
   font-size: 30px;
}

h3.active{
   background-color: yellow;
}

并集选择器

/*并集选择器 （组合）  设置多个标签中的统一样式*/
a,h4{
   color: #666;
   font-size: 20px;
   text-decoration: none;
}

属性选择器

除了HTML元素的id属性和class属性外，还可以根据HTML元素的特定属性选择元素。

根据属性查找

[title] {
  color: red;
}

根据属性和值查找

找到所有title属性等于hello的元素：

[title="hello"] {
  color: red;
}

找到所有title属性以hello开头的元素：

[title^="hello"] {
  color: red;
}

找到所有title属性以hello结尾的元素：

[title$="hello"] {
  color: red;
}

找到所有title属性中包含（字符串包含）hello的元素：

[title*="hello"] {
  color: red;
}

找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：

[title~="hello"] {
  color: red;
}

表单常用

input[type="text"] {
  backgroundcolor: red;
}

伪类选择器

常用的几种伪类选择器。

没有访问的超链接a标签样式：

a:link {
  color: blue;
}

访问过的超链接a标签样式：

a:visited {
  color: gray;
}

鼠标悬浮在元素上应用样式：

a:hover {
  background-color: #eee; 
}

鼠标点击瞬间的样式：

a:active {
  color: green;
}

input输入框获取焦点时样式：

input:focus {
  outline: none;
  background-color: #eee;
}

/*选中第一个元素*/
div ul li:first-child{
   font-size: 20px;
   color: red;
}
/*选中最后一个元素*/
div ul li:last-child{
   font-size: 20px;
   color: yellow;
}

/*选中当前指定的元素  数值从1开始*/
div ul li:nth-child(3){
   font-size: 30px;
   color: purple;
}

/*n表示选中所有 从0开始的  0的时候表示没有选中*/
div ul li:nth-child(n){
   font-size: 40px;
   color: red;
}

/*偶数*/
div ul li:nth-child(2n){
   font-size: 50px;
   color: gold;
}
/*奇数*/
div ul li:nth-child(2n-1){
   font-size: 50px;
   color: yellow;
}
/*隔几换色  隔行换色*/

div ul li:nth-child(5n+1){
   font-size: 50px;
   color: red;
}

伪元素选择器

介绍常用的伪元素。

first-letter

用于为文本的首字母设置特殊样式。

例如：

p:first-letter {
  font-size: 48px;
}

before

用于在元素的内容前面插入新内容。

例如：

p:before {
  content: "*";
  color: red;
}

在所有p标签的内容前面加上一个红色的*。

after

用于在元素的内容后面插入新内容。

例如：

p:after {
  content: "?";
  color: red;
}

在所有p标签的内容后面加上一个蓝色的?。

---

CSS的继承性和重叠性

继承性

继承：给父级设置一些属性，子级继承了父级的该属性，这就是我们的css中的继承

有一些属性是可以继承下来 ： color 、 font-、 text-、line-* 文本元素

像一些盒子元素，定位的元素（浮动，绝对定位，固定定位）不能继承

重叠性

层叠性： 权重的标签覆盖掉了权重小的标签，说白了 ，就是被干掉了
权重： 谁的权重大，浏览器就会显示谁的属性

谁的权重大？ 非常简单 数数

id的数量 class的数量 标签的数量

选择器的优先级

当权重不同时，数数
当权重一样的时候 是以后设置的属性为准。 前提权重一样 ，后来者居上

继承来的属性 权重为0

总结：

1. 先看标签元素有没有被选中，如果选中了，就数数 （id,class,标签的数量） 谁的权重大 就显示谁的属性。权重一样大，后来者居上
2. 如果没有被选中标签元素，权重为0。
   如果属性都是被继承下来的 权重都是0 。权重都是0:“就近原则” ： 谁描述的近，就显示谁的属性

注意： !import方式来强制让样式生效，但是不推荐使用。因为大量使用!import`的代码是无法维护的。

---

盒模型

盒模型的属性

**width：**指的是内容的宽度，而不是整个盒子真实的宽度

**height：**指的是内容的高度，而不是整个盒子真实的高度

padding: 就是内边距。 padding的区域是有背景颜色。并且背景颜色和内容区域颜色一样
也就是说background-color这个属性将填充所有的border以内的区域，就是边框到内容之间的距离。padding有四个方向。所以说我们能分别描述4个方向的padding。
方法有两种：1.写小属性 2.写综合属性 用空格隔开
如果想保证盒子的真实宽度，加width应该减padding 减width 应该加padding

border: 边框的意思
边框有三个要素： 粗细 线性 颜色
如果颜色不写，默认是黑色的
如果 粗细不写 不显示。 只写线性样式，默认的有上下左右 3px的宽度 solid 默认的黑色
margin： 外边距 指的是距离

标准文档流的概念

宏观的讲，我们的web页面和ps等设计软件有本质的区别
web 网页的制作 是个“流” 从上而下 ，像 “织毛衣”
而设计软件 ，想往哪里画东西 就去哪里画

标准文档流的微观现象？

1.空白折叠现象
2.高矮不齐，底边对齐
3.自动换行，一行写不满，换行写

Display属性的运用

将块级元素转化成行内元素

box {
    display:inline-block;
}

将行内元素转换成块级元素

span {
    display:block; 
}

隐藏当前的标签，不占位置

span {
    display:none;
}

隐藏当前的标签，占位置

span {
    visibility: hidden;
}