xiaoqiyan 的个人博客

记录精彩的程序人生

Open Source, Open Mind,
Open Sight, Open Future!
  menu
15 文章
0 评论
7238 浏览
1 当前访客
ღゝ◡╹)ノ❤️

Java学习之第7章网页开发基础(CSS基础)

CSS基础

  • 基础认知
  • 常见属性
    • color
    • font-size 字体大小
    • background-color 背景颜色
    • width 宽度
    • height 高度
  • 引入方式
    • 内嵌式

    • 外联式

      • link引入
    • 行内式

  • 基础选择器
    • 选择器的作用

      • 选择对应标签,设置样式
    • 标签选择器

      • 标签名
      • 选择的是一类标签,而不是单独的一个
      • 无论嵌套多深都能找到
    • 类选择器

      • .类名
      • 所有标签上都有class属性
      • 类名可以由数字、字母、下划线、中划线组成,但不能以数字或者中划线开头
      • 一个标签可以同时有多个类名,类名之间以空格隔开
      • 类名可以重复,一个类选择器可以同时选中多个标签
    • id选择器

      • #id属性值
      • 所有标签上都有id属性
      • id属性值类似于身份证号码,在一个页面中是唯一的,不可重复的!
      • 一个标签上只能有一个id属性值
      • 一个id选择器只能选中一个标签
    • 通配符选择器

      • *{}
      • 很少会用,设置全部标签
  • 字体和文本样式
    • 字体样式

      • 字体大小:font-size

        • 默认大小16px,需要设置单位
      • 字体粗细:font-weight

        • 100-900之间的整数
      • 字体样式:font-style

        • 倾斜:italic
      • 字体类型:font-family

      • 字体类型:font属性连写

    • 文本样式

      • 文本缩进 text-indent

        • 数字+px
        • 数字+em
      • 文本水平对齐方式 text-align

        • left

        • right

        • center

        • 注意:

          • 只能用在(需要给这些元素的父元素进行设置)
            • 文本
            • span标签 a标签
            • input标签 img标签
          • margin: 0auto
            • 如果是div p h 水平居中就用这个
      • 文本修饰 text-decoration

        • underline下划线
        • line-through 删除线
        • none无
    • line-height行高

      • 作用:控制一行的上下行间距

      • 取值:数字+px

      • 应用

        • 让单行文本垂直居中可以设置 line-height : 文字父元素高度
        • 网页精准布局时,会设置 line-height : 1 可以取消上下间距

CSS进阶

  • 选择器进阶
    • 后代选择器

      • 使用空格隔开
      • 注意:空格前后分别只能有一个元素
    • 子类选择器(CSS中使用)

      • 选择器1>选择器2
      • 注意:
        • 只能在儿子标签中找
    • 并集选择器

      • 语法:选择器1 , 选择器2 { css }
      • 每组选择器可以是基础选择器或者复合选择器
    • 交集选择器

      • 选择器1选择器2 { css }
      • 注意
        • 交集选择器中的选择器之间是紧挨着的,没有东西分隔
        • 如果有标签选择器,标签选择器必须写在最前面
    • emmet语法

      • 生成div类选择器: .类名
      • 生成id选择器 #id
      • 生成交集选择器 .类名**#id**
      • 生成子代选择器 ul>li
      • 内容文本 ul>li{文本}
      • 创建多个 ul>li*3
    • hover伪类选择器

      • 作用:鼠标触摸该元素时,可以改变样式
      • 选择器:hover { css }
  • 背景相关属性
      1. 背景颜色
      • background-color(bgc)
      • 属性
        • 默认透明
          • rgba(0,0,0,0),transparent
        • 不会影响盒子大小位置
      1. 背景图片
      • background-image(bgi)
      • url可以省略引号
      • 默认水平和垂直方向平铺
      • 背景图片不能撑开盒子
      1. 背景平铺
      • background-repeat(bgr)
      • 属性
        • repeat 水平垂直方向都平铺
        • no-repeat 不平铺
        • repeat-x 沿着水平方向平铺
        • repeat-y 沿着垂直方向平铺
      1. 背景位置
      • background-position(bgp)

      • 属性

        • 方位名词
          • 水平方向
            • left
            • center
            • right
          • 垂直方向
            • top
            • center
            • bottom
        • 数字+px
          • 图片左上角为坐标原点
      • 第一个为水平,第二个为垂直

      1. 背景相关属性
      • 连写形式
        • background (bg)
        • 空格隔开
      • 注意
        • 如果要设置单独的样式
          • 要么把单独写在连写下面
          • 要么把单独写在连写里面
      1. 属性连写
  • 元素显示模式
    • 块级元素

      • display:block

      • 特点

        • 独占一行
        • 宽度默认,高度撑开
        • 可以设置宽高
      • 标签

        • div p h系列
        • ul li form
    • 行内元素

      • display:inline

      • 特点

        • 一行可以显示多个
        • 宽高可以撑开
        • 不可以设置宽高
      • 代表标签

        • a,span
    • 行内块元素

      • display:inline-block
      • 特点:
        • 一行可以显示多个

        • 可以设置宽高

        • 代表

          • input textarea button select
        • image其实是行内块

    • 元素显示模式转换

    • 嵌套规范

      • 块级一般作为大容器,可以嵌套:文本、块级元素、行内元素等

      • 但p中不要嵌套div、p、h等块级元素

      • a标签内部可以嵌套任意元素

        • a不能嵌套a标签
    • 居中方法总结

  • CSS三大特性
    • 继承性

      • 默认集成父元素样式

      • 常见场景

        • 可以直接给ul设置 list-style:none 属性,从而去除列表默认的小圆点样式
        • 直接给body标签设置统一的font-size,从而统一不同浏览器默认文字大小
      • 继承失效情况

        • a标签color失效
        • h系列标签font-size会失效
        • div的高度不能继承,但宽度有类似继承的效果
    • 层叠性

    • 优先级

盒子模型

  • CSS 三大特性
    • 优先级
      • 不同选择器具有不同的优先级,优先级高的选择器样式会覆盖优先级低选择器样式

      • 继承 < 通配符选择器 < 标签选择器 < 类选择器 <id选择器<行内样式<!important

      • 注意:

        • !important写在属性值的后面,分号的前面!
        • !important不能提升继承的优先级,只要是继承优先级最低!
        • 实际开发中不建议使用 !important 。
    • 权重叠加公式
      • 注意:
        • !important如果不是继承,则权重最高
  • PxCook的基本使用
  • 盒子模型
    • 每个标签都可以看做一个盒子

    • 每个盒子由内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)构成

    • 内容区域

      • 设置宽高是width、height
    • 边框区域

      • border : 10px solid red;
      • 设置粗细
      • 边框样式
      • 边框颜色
    • 内边距

    • 自动内减

      • box-sizing : border-box;
    • 外边距

      • 应用

      • 清除默认的

        • padding :0;
        • margin : 0;
      • 注意:

        • 垂直布局 的 块级元素,上下的margin会合并

          • 只给其中一个盒子设置margin即可
        • 互相嵌套 的 块级元素,子元素的 margin-top 会作用在父元素上

          • 给父元素设置border-top 或者 padding-top(分隔父子元素的margin-top)
            1. 给父元素设置overflow:hidden
            1. 转换成行内块元素
            1. 设置浮动
        • 垂直方向的margin和padding布局中无效!

CSS布局

  • 结构伪类选择器
    • 作用:查找元素
    • 优势:减少对类选择器的依赖
  • 伪元素
  • 标准流
  • 浮动
  • 清除浮动

标题:Python
作者:肖祺彦
地址:url

评论
取消