css

css与html是内容与形式的关系,HTML生成内容,CSS负责样式

  1. 引入CSS样式的方法
  • 行内样式 :定义在标签内使用style属性定义
  • 嵌入式:定义在<head></head>标签内
  • 导入式:
  • 链接式:<link href="XXX.css" rel="stylesheet" type="text/css"/>

      2.选择器

  • 标签选择器
  • 类别选择器
  • id选择器
  • 交集选择器
  • 并集选择器
  • 后代选择器
  • 兄弟选择器

     3.继承     子类继承父类的样式,在此基础上更改自己的样式,子类样式的修改并不影响父类的样式

     4.层叠规则        样式优先级:行内样式>ID 样式>类别样式>标记样式

       越特殊的样式优先级越高

       

盒子模型    border padding margin 

标准文档流 :在不使用其他的与排列和定位相关的特殊CSS规则时,各种元素的排列规则

我的理解就是按顺序的文档,不使用float和position属性的absolute形成的文档 HTML文件

定位静态定位:

相对定位:相对于原本的位置,通过偏移指定的距离,到达新的位置

绝对定位:相对于最近的已经定位的父元素进行定位

固定定位:基于浏览器窗口或者其他设备的显示窗口

z-index 值大的位于值小的上方,换句话就是值越大越先显示,不过是针对同一块地方的显示顺序

display 属性

inlinea:行内元素

inline-block:行内块元素

block:块元素

文字Font  

font-size:字号     font-weight:字体粗细

font-style:字体风格           font-family:字体

段落

text-align水平对齐方式           行高line-height

text-decoration 设置下划线等效果              text-indent首行缩进     文本阴影 text-shadow: h-shadow v-shadow blur color;

  • 边框border
  • padding内边距
  • margin外边距

      颜色、大小、样式

border padding margin  大小即粗细的参数个数分别设置的哪个方向的样式

参数值为2 :前一个数值是上下,后一个数值是左右

参数值为3个数字分别表示上、左右、下

参数值为4个数字分别表示上、右、下、左

backgound-image:url(" ")

background-repeat:repeat、no-repeat、repeat-x、repeat-y

background-color:color;

background-position:....;

原文地址:https://www.cnblogs.com/html-css-js/p/7099798.html