CSS

发表于

CSS

  • Casecading层叠 Style样式 Sheet表, 用于美化页面

CSS的三大特性

  1. 继承性: 元素可以继承上级元素的部分样式(包括文本相关和字体相关) ,个别标签自带效果不受继承影响,如:h1-h6自带字体大小不受影响,超链接a标签自带字体颜色也不受继承影响.
  2. 层叠性: 不同的选择器有可能作用到相同某一个元素,如果作用的样式不同则全部生效(层叠到一起全部生效),如果作用的样式相同则由优先级来决定
  3. 优先级: 作用范围越小优先级越高 id>class>标签名>继承 , 直接选中优先级高于间接选中(继承属于间接选中)

CSS的引入方式

  1. 内联样式:在标签的内部添加style属性,在属性内部添加css样式代码,弊端:不能复用
  2. 内部样式:在head标签内部添加style标签,通过选择器给元素添加样式,好处可以复用 弊端:只能在当前页面复用
  3. 外部样式:在单独的css文件中通过选择器给元素添加样式,在html页面中通过link标签引入样式文件, 好处:可以多页面复用

三种引入方式的优先级

  1. 内联优先级最高
  2. 内部和外部优先级相同,后执行覆盖先执行

选择器

  1. 标签名选择器
    • 格式: 标签名{样式代码}
    • 选取页面中所有的指定标签
  2. id选择器
    • 格式: #id{样式代码}
    • 当需要选择页面中的某一个元素时使用id选择器
  3. class选择器
    • 格式: .class{样式代码}
    • 当需要选取页面中某一类元素(多个)时使用class选择器
  4. 属性选择器
    • 格式: 标签名[属性名=’属性值’]{样式代码}
    • 通过标签的属性去选择元素
  5. 分组选择器
    • 格式: div,#id,.class{样式代码}
    • 将多个选择器合并成一个选择器
  6. 子孙后代选择器
    • 格式: div span{样式代码}
    • 选取div里面所有的span(包括子元素和所有后代元素)
  7. 子元素选择器
    • 格式: div>span{样式代码}
    • 选取div里面所有的子元素span
  8. 伪类选择器
    • 用于选取元素的状态
    • 未访问状态link/访问过状态visited/点击状态active/悬停状态hover
  9. 任意元素选择器
    • 格式: *{样式代码}
    • 选中页面中所的元素

颜色赋值

  • 三原色:rgb red green blue 红 绿 蓝 每个颜色的取值是0-255
  1. 通过6位16进制赋值 #ff0000
  2. 通过3位16进制赋值 #f00
  3. 通过3位10进制赋值 rgb(0-255,0-255,0-255)
  4. 通过4位10进制赋值 rgba(0-255,0-255,0-255,0-1) a=alpha 透明度 值越小越透明

背景图片

1
2
3
4
5
6
7
8
/* 设置背景图片 */
background-image: url("../imgs/a.jpg");
background-size: 100px 100px;
/* 禁止重复 */
background-repeat: no-repeat; 
/* 控制背景图片的位置 
	left right top bottom center*/
background-position: 10% 10%;

盒子模型

  • 盒子模型由 宽高+外边距+内边距+边框组成

盒子模型之宽高

  • 两种赋值方式:
    1. 像素
    2. 上级元素的百分比
  • 行内元素不能修改宽高 宽高由内容决定

盒子模型之外边距

  • 什么是外边距:元素距上级元素或相邻兄弟元素的距离称为外边距
  • 赋值方式:
    • margin-left/top/bottom/right:20px;
    • margin:10px; 四个方向10px
    • margin:10px 20px; 上下10 左右20
    • margin:0 auto; 水平居中
    • margin:10px 20px 30px 40px; 上右下左 顺时针
  • 行内元素上下外边距无效
  • 左右相邻相加 上下取最大
  • 当元素的上边缘和上级元素的上边缘重叠时会出现粘连问题,在上级元素中添加overflow:hidden 解决

盒子模型之边框

  • 单个方向添加边框:
    • border-left/right/top/bottom: 粗细 样式 颜色;
  • 四个方向添加边框
    • border:粗细 样式 颜色;
  • 行内元素边框不影响元素所占高度
  • 圆角:
    • border-radius: 值越大越圆 超过宽高一半时变成圆形(前提宽高一样)

盒子模型之内边距

  • 什么是内边距: 元素边框距内容的距离
  • 如果需要移动元素的文本内容则必须使用内边距,如果需要移动元素的子元素内容可以使用两种方式
      1. 给子元素添加外边距
      1. 给元素添加内边距(会影响元素的宽高)
  • 行内元素内边距不影响元素所占高度

文本相关样式

  1. 水平对齐方式
    • text-align:left/right/center
  2. 文本修饰
    • text-decoration:overline/underline/line-through/none
  3. 文本阴影
    • text-shadow:颜色 x偏移值 y偏移值 浓度(值越小越清晰)
  4. 行高
    • line-height: 像素
  5. 文本颜色
    • color:red;

字体相关

  1. 字体大小 font-size
  2. 字体加粗 font-weight:bold/normal(去掉加粗效果)
  3. 斜体 font-style:italic
  4. 字体设置 font-family: xxx,xxx,xxx;

溢出设置overflow

  • hidden 隐藏
  • visible 显示
  • scroll 滚动显示

显示方式display

  • block: 块级元素的默认值,独占一行,可以修改宽高
  • inline: 行内元素的默认值,共占一行,但是不能修改宽高
  • inline-block:行内块, 共占一行并且可以修改宽高

行内元素的垂直对齐方式 vertical-align

  • top 上对齐
  • bottom下对其
  • middle 中间对齐
  • baseline 基线对齐

position定位 (定位方式 4+1 )

  1. 静态定位static(默认)
    • 也称为文档流定位,块级元素从上到下,行内元素从左向右
  2. 相对定位relative
    • 元素不脱离文档流,通过top/bottom/left/right让元素从初始位置做偏移
  • 当需要移动某个元素,但不希望其它元素受影响时使用.
  1. 绝对定位absolute
    • 元素脱离文档流,通过top/bottom/left/right让元素相对于窗口做位置偏移(默认)或相对于某个上级元素做位置偏移(在上级元素中添加相对定位)
  • 当需要往页面中添加一个元素,但不希望影响其它元素的位置
  1. 固定定位fixed
    • 元素脱离文档流,通过top/bottom/left/right让元素相对于窗口做位置偏移

浮动定位

  • 元素脱离文档流,元素从当前所在行向左或向右浮动,当撞到上级元素边框或其它浮动元素时停止
  • 通过外边距控制元素的具体位置
  • 一行装不下会自动换行, 有可能被卡住
  • 如果元素的所有子元素全部浮动,则自动识别的高度为0,通过给元素添加overflow:hidden可以解决
  • 如果元素浮动,则会脱离文档流 后面的元素会顶上去,如果不希望顶上去则给后面的元素添加clear:both
  • 当需要把纵向排列的元素改成横向排列时使用浮动定位