CSS基础知识

2019-03-10 本文已影响0人 logoss

CSS（Cascading Style Sheet）层叠样式表

语法

选择器{
        声明语句
}

例：

h{
  color:red;
  font-size:16px;
}

注释

/*这是单行注释*/
/*
这是多行注释
这是多行注释
*/

引入方式

1.行内引入

<h1 style="color:red;">这是个标题</h1>

2.内嵌
写在html的head里

<style>
  h1{
    color:red;
  }
<style>

3.外链
写在.css文件里，在head里用link引入

<link rel="stylesheet" href="style.css">

选择器

基础选择器

元素选择器例:p{ color:red}
id选择器例： #myText{color:red} 用#+id的形式在html元素里写id="myText"
类选择器例：.myClass{color:red} 用.+class的形式在html元素里写class="myClass"
通用选择器例： *{color:red} *可以匹配所有元素

关系选择器

后代选择器：用空格表示例：
.block p{color:green}
会选中block类元素里面的所有p元素
子元素选择器: 用符号>
.block>p{color:blue}
会选中block类元素的子元素(只能选中下一级的p，下下级的p不能选中)
兄弟选择器1：用符号 ~
p~div{width:200px;}
选中p后面所有div兄弟元素
兄弟选择器2:用符号+
p+div{width:300px;}
选中p后面一个div兄弟元素

伪类选择器

例:a:hover{color:blue} 在鼠标悬浮时会变蓝

状态伪类

:link a元素未被访问前
:visited a元素被访问后
:hover 鼠标悬停时
:active 鼠标按下时

结构伪类

:first-child 选中第一个
:last-child 选中最后一个
:nth-child(n) 顺序选中n
:nth-last-child(n) 倒序选中n
n可以是数字，表示选中第几个，编号从1开始（不是从0开始）
n可以是关键字(odd,even) 表示奇数和偶数
n可以是公式，比如2n+1:表示选中1,3,5,7,9,.....

伪元素选择器

注意，伪元素用双冒号(以前都是但冒号，所以有些老的网页是单冒号)

::first-letter 第一个字
::first-line 第一行
::before 内容之前插入一个元素
::after 内容之后插入一个元素

属性选择器

[attribute] 用于选取带有指定属性的元素
[attribute=value] 用于选取带有指定属性和值的元素
[attribute^=value] 匹配属性值以指定值开头的每个元素
[attribute$=value] 匹配属性值以指定值结尾的每个元素
[attribute*=value] 匹配属性值中包含指定值的每个元素
[attribute~=value] 用于选取属性值中包含指定词汇的元素

选择器分组

有相同属性的选择器都可以写在一起,用逗号分割
例：

h1,div,span{
  color:#333;
  font-family:"微软雅黑";
}

单位

px:像素
%:百分比,根据父对象为基准。ps：对font-size设置百分比，是以浏览器默认字体16px为基准的。所有浏览器默认字体都是16px
em:对于font-size，1em表示和父对象字体一样，2em表示字体大小为父对象2倍。对于长度属性，em相当于该元素的字体大小，如果该元素没有字体属性，则往上查找。
rem: 大小相对于根元素html的字体大小
vw：基于视窗的宽度计算，1vw 等于视窗宽度的百分之一
vh：基于视窗的高度计算，1vh 等于视窗高度的百分之一
vmin：基于vw和vh中的最小值来计算，1vmin 等于最小值的百分之一
vmax：基于vw和vh中的最大值来计算，1vmax 等于最大值的百分之一
calc计算

.box {
   height: calc(50vh - 20px); /* 50% 的视窗高度减掉20px */
   width: calc(100% / 3);  /* 三分之一的父容器宽度 */
   background: red;
}

盒模型

margin 外边距
border 边框
padding 内边距
content 内容区域

复合属性有top right bottom left 分别对应四个方向
比如border-top 上面的边框
margin-left 坐标的外边距

box-sizing

挺重要的一个属性

content-box 默认 width和height属性是内容区域大小
border-box width和height属性是边框区域大小
inherit 继承自父元素

border属性

border-width
border-style
border-color
简写:

.px1{
    border:1px solid #ccc
}

上下左右的简写顺序:

.box-1{margin:10px 20px 30px 40px}
/*四个参数时，参数对应上，右，下，左*/
.box-2{margin:10px 20px 30px}
/*三个参数时，参数对应 上，左右，下*/
.box-3{margin:10px 20px}
/*两个参数时，参数对应  上下，左右*/
.box-4{margin:10px}
/*一个参数时，表示四条边都是*/

隐藏元素的方式

display:none 相当于游戏引擎的active=false
visibility:hidden 相当于游戏引擎的visible=false
overflow:auto 裁剪滚动显示里面的东西
overflow:hidden 裁剪里面的内容

样式的继承和层叠

有些样式会被子元素继承，比如字体颜色大小等。有些样式不能被继承，比如边框。
层叠权重：自己声明的样式>浏览器自带样式>继承样式
自定义样式优先级：style>id选择器>类选择器>元素选择器>*通用选择器

初始化

由于各个浏览器默认样式不统一，最好用一个初始化css来统一初始化样式
初始化用的css:https://necolas.github.io/normalize.css/6.0.0/normalize.css