CSS入门学习笔记

CSS：层叠样式表，也是一种标记语言。主要用于设置HTML页面中文本内容，图片外形以及版面布局和外观显示样h1 {color: red; }，可以有效地对页面的布局、字体、颜色、背景、和其他效果实现更加精确的控制

一、样式结构

1. 选择标签

用于指定CSS样式HTML标签，花括号内是对该对象设置的具体样式

• 属性与属性值以“键值对”的形式出现，属性是对指定对象设置的样式属性，例如字体大小，文本颜色等

• 标签选择器(元素选择器)：指HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式，选择页面中所有的某一类

• 类选择器：差异化选择不同的标签，单独选一个或某几个标签

  • 样式点定义

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

  • class属性

    <div class="red"></div>
    

2. 声明

根据不同需求选出不同标签

• 标签选择器：标签名作为选择器 p{}
• 类选择器：样式点定义，结构类（class）调用
• id选择器：以id属性设置，以“#”来定义。只能调用一次
• 通配符选择器：使用“*”定义，它表示获取页面中所有元素（标签）。自动给所有元素使用样式

3. 引入样式

• 行内样式表（行内式）：写在HTML内部，放置

二、文字类

1. font属性

• font-family：定义文本的字体

• font-size：定义字体大小

• font-weight：定义字体粗细（加粗是700/bold，不加粗是normal/400）

• font-style：定义字体样式（倾斜是italic，不倾斜是normal）

• font复合属性：顺序不能置换，字号与字体必须同时出现

  font: font-style font-weight font-size/line-height font-family;
  

2. 文本属性

• color：文本颜色（red、green / #000000、#fff / rgb(255, 0 , 0)、rgb(100%, 0% ,0%)）

• text-align：文本内容的水平对齐方式（left / right / center）

• text-decoration：文本装饰（none / underline下划线 / overline 上划线 / line-through删除线）

• text-indent：文本缩进（段落首行缩进，em一个文字大小）

• line-height：行间距。行高等于盒子高度时，文字居中。上间距 + 文字 +下间距 = 设定的行高

三、Emmet语法

• div 生成

• div*10生成10个

  （同级并列）

• 父子级关系标签用“>”，eg：ul>li

• 兄弟关系标签用“+”，eg：div+p（同级并列）

• 带有类名或id名，p.demo / #two生成<p class=“demo” / id=“two”>

• 生成的div类名有顺序，自增符号“$”，.demo$*3会生成

  <div class="demo1"></div>
  <div class="demo2"></div>
  <div class="demo3"></div>
  

• 生成的标签内部写内容用{}表示，p{链接}生成

  链接

四、复合选择器

1. 后代选择器

包含选择器，可以选择父元素里面的子元素

/*ol li {}选择ol里面所有的li标签元素，ol为父元素，li为子元素*/
ol li a {}
.nav li a {}

2. 子元素选择器

只能选择作为某元素的最近一级子元素

.nav > a {}

3. 并集选择器

各选择器通过“,”连接而成

/*用于集体声明，","有“和”的意思*/
div, p{}

4. 伪类选择器

向某些选择器添加特殊的效果，用“:”表示

链接伪类选择器：

• a:link：选择所有未被访问的链接

• a:visited：选择所有已被访问的链接

• a:hover：选择鼠标指针位于其上的链接

• a:active：选择活动链接（按下未放开）

5. focus伪类选择器

选择取得焦点（光标）的表单元素

input : focus {}

五、元素显示模式

1. 块元素

• 独占一行，如
  、

  、

  等

• 高度、宽度、内外边距都可以控制，默认宽度容器100%
• 文字类的元素内不可以使用块级元素。eg：

  不可以放块级元素，特别是div

2. 行内元素

• 相邻的行内元素在一行上，一行可以显示多个，如、、等

• 高、宽设置无效，默认宽度内容本身

• 链接里面不能再放链接

3. 行内块元素

• 、 、

• 一行内可以放置多个行内块元素

• 可以设置高度、宽度，默认宽度为内容本身

4. 转换display

• 转换为块元素：display : block;

• 转换为行内元素：display : inline;

• 转换为行内块元素：display : inline-block;

六、背景

• background-color : transparent（透明，默认）| color

• background-image : none（无背景图片，默认） | url

• background-repeat（平铺）：repeat（默认） | no-repeat | repeat-x | repeat-y

• background-position：x y

  • 方位名词position：top、left、right、center、bottom（background-position : right center和background-position : center right等价，指定一个方位名词，另外一个默认居中）
  • 精确定位length：百分数 | 由浮点数字和单位标识符组成的长度值（background-position : 10px 10px; 指定一个一定是x，另外一个默认居中）
  • 可混合使用，一定有顺序。第一个x坐标，第二个y坐标

• background-attachment : scroll（随着对象内容滚动，默认） | fixed（固定）

• background（简写）：背景颜色 背景url 背景平铺 背景滚动 背景位置（背景复合属性默认顺序）

• background（背景半透明） : rgba(0, 0, 0, 0.5); 透明度0表示透明，1表示不透明

• background : linear-gradient(起始方向, 颜色1, 颜色2, …);

  /*背景渐变必须添加浏览器私有前缀*/
  background : -webkit-linear-gradient(left, red, blue);
  background : -webkit-linear-gradient(left, top, red, blue);
  

• background-size : x y | cover（完全覆盖盒子，可能会有部分不显示）| contain（高度或宽度和盒子一样即可，可能会有部分空白）;手动设置背景图大小

七、三大特性

1. 重叠性

• 相同选择器设置相同的样式

• 样式冲突，就近原则

• 样式不冲突，不会层叠

  div{
      color:red;
      font-size:12px;
  }
  div{
      color:pink;
  }
  /*会显示粉色12px的字*/
  

2. 继承性

• 子标签会继承父标签某些样式，如字体、颜色等

• 如果子元素没有设置行高，则会继承父元素的行高为1.5，此时子元素的行高为当前子元素文字大小*1.5。

3. 优先级

• 选择器相同，则执行重叠性；选择性不同，则根据选择器权重执行

  • 继承或者*：0，0，0，0
  • 元素选择器：0，0，0，1
  • 类选择器，伪类选择器：0，0，1，0
  • ID选择器：0，1，0，0
  • 行内样式style=“”：1，0，0，0
  • !important重要的：无穷大

权重有4组数字组成，但不会有进制，继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0

• 如果是复合选择器，则会由权重叠加，需要计算权重

  • div ul li ——> 0, 0, 0, 3

  • .nav ul li ——> 0, 0, 1, 2

  • a:hover ——> 0, 0, 1, 1

  • .nav a ——> 0, 0, 1, 1

4. 叠放次序z-index

z-index : 1;可取正整数、负整数、0，默认auto（不能加单位）

大的在上面会盖住小的，值相同，后来者居上。

八、盒子模型

把HTML页面中的布局元素看作是一个矩形的盒子（盛装内容的容器）

1. border边框

会格外增加盒子的实际大小

• border : border-width || border-color || border-style

  border-style : none | hidden | dotted（点线） | dashed（虚线） | solid（实线） | double（双线） | groove （3D凹槽）| ridge（菱形边框） | inset（3D凹线） | outset（3D凸线）
  
  border : 1px solid red;（border-top | border-bottom | border-left | border-right）
  

• 表格细线边框：border-collapse : collapse;相邻边框合并在一起

• border-radius : length;圆角边框，正方形设置为一个圆把数值修改高度或宽度的一半，或直接写为50%

  border-top-left-radius | border-top-right-radius | border-bottom-left-radius | border-bottom-right-radius
  

2. padding内边距

会格外增加盒子的实际大小，如果没有指定width/height属性，则padding不会撑开盒子大小

- padding-left | padding-right | padding-top | padding-bottom
- padding : 5px;上下左右；padding : 5px 10px;上下5，左右10；padding : 5px 10px 20px;上5下20，左右10；padding : 1px 2px 3px 4px;上右下左

清除内外边距：*{padding : 0; margin : 0;}

3. margin外边距

不会格外增加盒子的实际大小

margin-top | margin-right | margin-bottom | margin-left

margin : 0 auto; | margin-left : auto; | margin-right : auto; | margin : auto;

水平居中（块级元素）：盒子必须指定宽度，左右外边距都设置为auto

行内元素或行内块元素水平居中给父元素添加text-align : center

4. 阴影

• 盒子阴影

  box-shadow : h-shadow v-shadow blur spread color inset;
  

  h-shadow（水平阴影的位置，必填） | v-shadow（垂直阴影的位置，必填） | blur（模糊距离） | spread（阴影的尺寸） | color（阴影的颜色） | inset（将外部阴影改为内部阴影）

• 文字阴影

  text-shadow : h-shadow v-shadow blur  color ;
  

  h-shadow（水平阴影的位置，必填） | v-shadow（垂直阴影的位置，必填） | blur（模糊距离） | color（阴影的颜色）

九、页面布局

1. 标准流

• 块级元素独占一行，从上向下排列

• 行内块元素从左到右排序，碰到父元素边缘自动换行

• 脱标的盒子不会触发外边距合并

2. 浮动（float）

float : none（默认） | left | right

• 浮动特性

  • 浮动元素不会压住文字

  • 脱标：脱离标准普通流的控制移到指定位置。盒子浮动不占有位置

  • 多个盒子设置浮动，按照属性值一行内显示并且顶端对齐排列

  • 任何元素都可以浮动，添加浮动后具有行内块元素相似的特性，可直接给定高度和宽度

  • 盒子大小没有设置宽度，默认和父级一样宽，添加浮动后，它的大小根据内容来决定

• 清除浮动

  • 清除浮动后，父级会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响标准流了。

  • 清除左右两侧浮动的影响

    clear : left | right | both
    

  • 额外标签法也称隔墙法，是W3C推荐的做法。在浮动元素末尾添加一个空标签（必须是块级元素）。

    <div style="clear : both">或者其他标签<br />
    

  • 父级添加：

    overflow : hidden | auto | scroll
    
    after伪元素：div : after {}（隔外法升级版）
    
    双伪元素：.clearfix : before, .clearfix : after {}  .clearfix : after {clear : both;}
    

3. 定位

可以让盒子自由的在某个盒子内移动位置或固定屏幕中某个位置，并且可以压住其他盒子。

定位 = 定位模式 + 边偏移（定位模式：指定一个元素在文档中的定位方式；边偏移：决定了该元素的最终位置）

边偏移：top、bottom、left、right。eg：top : 80px;

定位模式position

• static静态定位（默认定位，无定位）

• relative相对定位

  • 相对于自己原来的位置来移动的

  • 原来标准流的位置继续占有，后面的盒子仍然以标准流方式对待它

  • absolute绝对定位

    • 不占有原先位置

    • 相对于它父元素来说

    • 没有父元素或父元素没有定位，以浏览器为准定位

    • 父元素有定位（相对、绝对、固定），则以最近一级有定位父元素为参考点移动位置

    • 添加定位后具有行内块元素相似的特性，可直接给定高度和宽度

  • fixed固定定位

    • 不占有原先位置

    • 固定于浏览器可视区位置，以浏览器可视窗口为参照点移动

    • 与父元素无关，不随着滚动条滚动，会压住文字

    • 固定在版心右侧位置，position : fixed; left:50%; margin-left:版心一半;

    • 添加定位后具有行内块元素相似的特性，可直接给定高度和宽度

  • sticky粘性定位

    • 占用原来位置
    • 以浏览器可视窗口为参照点移动
    • 必须有top、left、right、bottom其中一个才有效

九、显示与隐藏

display : none（隐藏） |  block（ 显示）;隐藏后不占有原位置（较多使用）

visibility : visible（ 可视） | hidden（ 隐藏）;隐藏后占有原位置

overflow ：visible | auto（超出滚动条，未溢出没有滚动条） | hidden（隐藏溢出部分） | scroll（总是显示滚动条）; 只对溢出部分隐藏

书写顺序

• 布局定位属性：display / position / float / clear / visibility / overflow

• 自身属性：width / height / margin / padding / border / background

• 文本属性：color / font- / text- /vertical-align / white-space / break-word

• 其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background

十、高级技巧

• 精灵图（sprites）

  • 有效的减少服务器请求次数，主要针对小的背景图片使用

  • 借助于background-position，一般为负值

  • 一张图片获取不同位置的小图标

• 字体图标（iconfont）

  • 展示是图标，本质是文字。比较简单的小图标

  • 字体图标下载网站：http://icomoon.io | http://www.iconfont.cn/

• CSS三角

  width : 0px; 
  height : 0px; 
  border : 50px solid transparent; 
  border-top-color : pink;  /*指向下的三角形*/
  
  /*
  border-right-color : pink;
  border-bottom-color : pink; 
  border-left-color : pink;
  类似将正方形沿对角切割四个三角形
  */
  

• 用户界面

  • 鼠标样式

    cursor : default（小白，默认） | pointer（小手） | move（移动） | text（文本） | not-allowed（禁止）;
    

  • 取消表单轮廓outline : none; | 防止拖拽 resize : none;（文本域）

  • vertical-align : baseline（元素放置父元素基础线上，默认） | top（把元素顶端于行中最高元素顶端对齐） | middle（放置父元素中部） | bottom（把元素顶端于行中最低元素顶端对齐）
    

    在行内元素、行内块元素处使用

  • 溢出文字省略号显示

    • 单行文本溢出

      white-space : nowrap（强制一行显示完）;
      overflow : hidden（隐藏超出部分）;
      text-overflow : ellipsis（用省略号代替超出部分）;
      

    • 多行文本溢出

      overflow : hidden; 
      text-overflow : ellipsis; 
      display : -webkit-box; 
      -webkit-line-clamp : 2; 
      -webkit-box-orient : vertical;
      

; | 防止拖拽 resize : none;（文本域）

• vertical-align : baseline（元素放置父元素基础线上，默认） | top（把元素顶端于行中最高元素顶端对齐） | middle（放置父元素中部） | bottom（把元素顶端于行中最低元素顶端对齐）
  

  在行内元素、行内块元素处使用

• 溢出文字省略号显示

  • 单行文本溢出

    white-space : nowrap（强制一行显示完）;
    overflow : hidden（隐藏超出部分）;
    text-overflow : ellipsis（用省略号代替超出部分）;
    

  • 多行文本溢出

    overflow : hidden; 
    text-overflow : ellipsis; 
    display : -webkit-box; 
    -webkit-line-clamp : 2; 
    -webkit-box-orient : vertical;