html&css系列学习——（四）CSS引入、特性及样式

一、css的引入方式

1.内联样式/行内样式 style属性
2.内部样式 style标签 head里面
3.外部样式 link标签 @import url()-------写在title下面
例如：<link rel="stylesheet" href="./test.css">

二、css特性：

1.继承性-----font/text/line/color 属性可以被继承
2.层叠性-----一个样式覆盖一个样式
3.优先级-----
	3.1 指向同一目标：谁近谁优先级高；
	3.2 同一选择器：谁约靠后，谁优先级越高；
	3.3 不同选择器：(!important 优先级别最高)>(style：1000)>(id选择器：100)>(类选择器：10)>(标签选择器：1)>(通配符选择器：0)。【注：通配符选择器：*{}】

三、文本属性：

• color 为字体指定颜色
• font-style 用于打开和关闭斜体文本
• font-weight 为字体设置粗细程度
• font-size 为文字指定大小
• font-family 为文字指定特殊的字体，浏览器只会使用浏览器可以访问到的字体
• webFont @font-face:{}网络字体
• line-height:一行字的高度（放在块级元素内）
• text-decoration 设置或者取消文本修饰
• text-align 文字排列方式
• text-indent 文本缩进属性
• text-transform 设置或者取消字体改变（大小写 首字母大写 ）
• text-shadow 设置或者取消文本阴影
• iconfont（推荐）/ font-awesome 字体图标

四、边框属性：

• border-width 边框宽度
• border-style 边框样式
• border-color 边框颜色
  前三个属性可合在一起，例如：border:2px solid skyblue;
• border-radius 圆角边框的半径取值
• box-shadow: h-shadow v-shadow blur spread color inset; 边框阴影

五、内外边距属性：

• margin（外边距）
  例如：margin: 0 auto; （分别表示上下为0px，左右自适应）
• padding（内边距）
  例如：padding:10px 20px 30px 40px; （分别表示上、右、下、左边距）
  【注：都可以单个写成上下左右类型】

六、颜色属性:

• 1.关键字（各种颜色的英文） skyblue/yellowgreen/pink/orange/aqua/brown…
• 2.rgb(red, green, blue); 该三色为三原色
• 3.rgbargba(red, green, blue, alpha); alpha可设置透明度
• 4.十六进制色块 例如：#F3E5F5
  单色链接：CSS常用十六进制颜色代码表 - 薄荷叶子
  渐变色链接：https://uigradients.com/#MegaTron

七、列表属性：

• 1.list-style-type:square circle disc
• 2.list-style-position:outside inside
• 3.list-style-image:url(‘’);
  前三个属性可合在一起，例如：list-style:

八、控制元素布局的属性：

1.display：(常用的)

• none:隐藏元素(不占用内存空间)
• flex:伸缩盒
• inline:行内元素
• block:块级元素
• inline-block:行内块元素
• table:块级表格,表格前后带有换行符

2.position：(z-index分层)

• static:静态定位
• relative:相对html页面定位
• fixed:相对浏览器窗口定位
• absolute:相对最近的已定位父元素绝对定位，若无父元素则相对html页面
• sticky:粘性定位

3.float:(clear清除浮动)

• right:靠右
• left:靠左
• none:不浮动
• inherit:继承父元素浮动

扩：

隐藏元素的三种办法：

1.display:none;              设置可见性，特点：不占据页面空间
2.visibility:hidden;         设置可见性，特点：占据页面空间
3.opacity:0;                 设置透明度，特点：占据页面空间

长度单位：

1.px：像素单位-               相对于当前屏幕宽高度而言
2.em：相对长度单位            相对于当前元素字体大小而言
3.rem：相对长度单位           相对于html元素字体大小而言