前端知识之css样式

时间 2019-12-04

标签前端知识 css 样式栏目 CSS 繁體版

原文原文链接

前端之CSS样式css

css介绍
- css是为html标签设置样式的
- css由选择器和声明组成
  - 声明包括属性和属性值
  - 声明之间用分号；隔开
- css注释
  - /注释类容/
css的几种引入方式
- 行内样式不推荐使用
  - 直接在html标签中style属性中设置样式，不推荐使用，不方便后续更改
  - ```
  <p style="color: red">Hello world.</p>
```
- 内部样式
  - 嵌入式是将css样式集中写在网页标签标签对中
  - ```
  <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <style>
          p {color: #0000cc}
      </style>
  </head>
```
- 外部样式推荐使用
  - 就是将css样式单独写在一个文件中，而后经过页面引入便可，推荐使用
  - 引入方法
  - ```
  head>
      <meta charset="UTF-8">
      <title>Title</title>
      <link rel="stylesheet" href="路径">
  </head>
```
css选择器
- 基本选择器
  - id选择器 #d1 {color: red} id为d1的颜色为red
  - 标签选择器 div {color: red} 标签是div的颜色为red
  - 类选择器 .c1 {color: red} class为c1的颜色为red
  - 通用选择器 * {color：red} 全部标签颜色都为red，不推荐使用
- 组合选择器
  - 后代选择器 div p {color: red}div标签内的p标签颜色为red
  - 儿子选择器 div>p {color: red}div标签的子级p标签颜色为red
  - 毗邻选择器 div+p div标签同级标签的下面p标签
  - 弟弟选择器 div~p div标签同级标签下的全部p标签
- 属性选择器
  - 根据标签中属性样式 div[title]
    - div.p1 div且class为p1的标签
  - 根据标签中属性的具体值给定样式 div[title="hello"]
- 分组和嵌套
  - 为多个标签给定相同的样式 div,p {color: red} 标签与标签之间用逗号隔开
  - 基本选择器之间能够任意嵌套组合使用
- 不经常使用的选择器
  - ```
  /*找到全部title属性以hello开头的元素*/
  [title^="hello"] {
    color: red;
  }
  
  /*找到全部title属性以hello结尾的元素*/
  [title$="hello"] {
    color: yellow;
  }
  
  /*找到全部title属性中包含（字符串包含）hello的元素*/
  [title*="hello"] {
    color: red;
  }
  
  /*找到全部title属性(有多个值或值以空格分割)中有一个值为hello的元素：*/
  [title~="hello"] {
    color: green;
  }
```
- 伪类选择器
  - link 未访问的连接，
    - ```
    a:link {
      color: #FF0000
    }
```
- visited 已访问的连接
  - ```
  a:visited {
    color: #00FF00
  }
```
  - hover 鼠标移动到连接上才改变样式
    - ```
    a:hover {
      color: #FF00FF
    }
```
- active 选的连接改变样式
  - ```
  a:active {
    color: #0000FF
  }
```
  - input 输入框获取焦点时样式
    - ```
    input:focus {
      outline: none;
      background-color: #eee;
    }
```
- 伪元素选择器
  - first-letter 经常使用的给首字母设置特殊样式
    - ```
    p:first-letter {
      font-size: 48px;
      color: red;
    }
```
- before 在内容前插入内容，该内容不可被选定
  - ```
  p:before {content: "*"; color:red}
```
  - after 在内容尾插入内容，
    - ```
    p:after {content: "#"; color:red}
```
- 注意:before 和after多用于清除浮动
- 选择器优先级
  - 当选择器相同时，谁最后加载听谁的；
  - 选择器不一样时，
    - 特殊状况下使用 !important 意思是不论优先级，必加载不推荐使用
      - p {color: yellow!important;}
css相关属性
- width 属性能够为元素设置宽度（块级标签才能设置宽度，而内联标签是由内容决定的）
- height 属性设置高度
- 设置字体的属性
  - font-family 能够把多个字体名称做为一个回退系统
    - ```
    body {
      font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
    }
    /*当系统不支持第一个，就会显示第二个字体，依次，都没有则显示系统默认字体*/
```
- font-size 字体大小
- font-weight 字的粗细
- 文本属性
  - color 颜色
    - 直接输入颜色名
    - 十六进制 #fffff红蓝绿
    - rgb格式 rgb（255，255，255）
  - text-align 对齐方式属性值
    - left 左边对齐默认
    - center 居中
    - jusify 俩端对齐
    - right 右边对齐
  - text-decoration 属性用来给文字添加特殊效果
    - none 默认。定义标准的文本
    - overline 定义文本上一条线
    - line-through 定义穿过文本的一条线
    - linherit 继承父元素的text-decoration属性
    - 经常使用：去掉a超连接中的默认的下划线
      - a {text-decoration: none;}
  - 文本首行缩进
    - text-indent
- 背景属性 background
  - 背景颜色 background-color
  - 背景图片 background-image: url()
  - 背景重复 background-repeat
    - no-repeat 不重复
    - repeat-x x轴重复
    - repeat-y y轴重复
    - repeat 默认重复
  - background-position 背景位置
    - ```
    background-position: right bottom;
    background-position: 200px 200px;
```
- 背景属性能够简写：
  - ```
  background:#ffffff url('1.png') no-repeat right top;
```
  - 背景固定 backgound-attachment
    - fixed 固定
- 边框 border 颜色，宽度，虚实，
  - border-style 风格
    - solid 实线
    - dashed 虚线
    - double 双实线
    - none 无边框
    - dotted 点状虚线
  - 一般宽度，风格，颜色，简写在一块儿
    - ```
    .c2 {border: 2px solid red;}
```
- border-radius 实现画圆,能够调节其度数，
  - ```
  border-radius: 50%;
```
- display 属性用来控制html元素的显示效果的
  - none 元素存在，可是不在浏览器显示，且不占空间
    - display中的none和visibility中的hidden区别
      - none，隐藏且不占空间
      - hidden ，隐藏可是占位置，
  - inline 行内元素，运用将块级元素的块特色取消
  - block 将内联元素变为块级元素
  - inline-block 使元素同时具备行内元素和块级元素的特色
- css盒子模型
  - 有图
  - margin（外边距）用于控制元素与元素之间的距离，最基本的就是控制元素和空间之间的间隔，从视觉角度达到相互隔开的目的
    - ```
    margin: 0 auto;
    /*顺序为顺时针设置，上右下左，auto为系统自动调节，*/
    padding：5px 10px 15px 20px
```
  - 提供一个，用于四边；html
  - 提供两个，第一个用于上－下，第二个用于左－右；前端
  - 若是提供三个，第一个用于上，第二个用于左－右，第三个用于下；浏览器
  - 提供四个参数值，将按上－右－下－左的顺序做用于四边；
- border(边框) 围绕在内边距和内容外的边距
- padding（内填充）用于控制文本内容和边框之间的距离
- Content（内容）盒子的内容，显示文本和图像
- 浮动float
  - 特色：浮动元素会生成一个块级块，自己不属于何种元素
    - 浮动的框能够向左向右移动，直到碰到边缘或碰到包含框或另外一个浮动框的边框
    - 因为浮动框处于z轴上，它在页面上的空间能够被其余元素所占
  - 取值：
    - left，right，none是默认值，不浮动
  - 解决浮动的反作用使用clear
    - 让其页面位置不能被其余元素占用
    - 取值
      - left 左边不能浮动
      - right 右边不能浮动
      - both 俩边都不能浮动
    - 解决实例
      - 不推荐使用
        
        能够用在浮动元素，以后的元素类添加属性clear：both使其不占用浮动元素的页面空间
        
        也能够在后续元素前增长一个标签，标签中放clear：both，使其不占用浮动元素的页面空间
      - 推荐使用
        
        在祖先类（不能是body）元素中
        
        .clearfix:after { content: ''; display: block; clear:both }
- overflow 溢出属性
  - hidden 内容会被修剪，且其他内容不可见
  - scroll 内容被修剪，可是浏览器会滚动以便显示其他内容
  - atuo 内容被修剪，浏览器自行处理
- 定位 position
  - 对属性位置进行移动
  - relative 相对定位，相对于原来的位置进行移动
  - abslute 绝对定位，根据本身祖先的元素进行定位
  - fixed 固定，对象脱离页面，固定死位置，不会随着滚动而变化
- z-index 设置z轴方向的层叠顺序
  - z-index：999
- opacity 透明度
  - background-color: rgba(0,0,0,0.3) 设置背景颜色的透明度
  - opacity: 0.3 设置全部的透明度
  - 对于元素的取值为0~1之间，0为彻底透明，1为彻底不透明