• css基础


    CSS 层叠样式表

    CSS的使用方式

    • 在元素的style属性内 行内式 内联式(行内样式:就是代码写在具体网页中的一个元素内;比如:<div style="color:#f00"></div>)
    • 写在 <style> 标签内
    • 写到外部css文件中,用<link>关联到HTML中,
    • @import可以引入css,用于css中引入css

    CSS的格式

    选择器{
    	属性:值;
    	属性:值;
    }
    

    CSS的长度单位

    • px 像素
    • em 相对于默认大小 倍数
    • 百分比
    • pt(磅) cm(厘米) mm(毫米) 绝对单位

    颜色表示

    • 颜色的英文单词

      red orange yellow green cyan(青) blue purple black white pink gray

    • rgb方式

        rgb(123,45,178)
        rgb(0~255,0~255,0~255)
        rgb(百分比,百分比,百分比)
      
      • rbg(255,0,0) 红色
      • rbg(255,255,255) 白色
      • rgb(0,0,0) 黑色
      • rgb(100,100,100) 灰色。 只要三个都一样,就是灰色
    • 十六进制

      • 34afa1

      • ff0000 红色 可以简写 #f00

      • 00ff00 绿色 简写 #0f0

      • 0000ff 蓝色 简写 #00f

      • ffffff 白色 简写 #fff

      • 000000 黑色 简写 #000

      • cccccc 灰色 简写 #ccc

      • 336699 简写 #369

    CSS注释

    • /* 注释 */

    CSS选择器

    • 元素选择器
    • ID选择器 #id名
    • CLASS选择器 .类名
    • 全局选择器 *
    • 关联选择器-后代元素选择器 slecter selecter
    • 关联选择器-子元素选择器 selecter>selecter
    • 组合选择器 两种基本选择器的组合
    • 伪类选择器 love-hate
      • :link 默认的
      • :visited 访问过的
      • :hover 当鼠标悬浮在上面时
      • :active 点击时

    选择器的优先级

    • ID >CLASS > Tag(标签)
    • 组合选择器 ID权重100 class权重10 Tag权重1

    CSS的属性

    字体属性

    • font-family(字体族科)
      衬线字体(serif 意思是在字的笔画开始、结束的地方有额外的装饰,而且笔画的粗细会有所不同。常用的serif(衬线字体)字体为Times New Roman、Georgia、宋体) 非衬线字体(sans-serif sans serif是无衬线字体,没有这些额外的装饰,而且笔画的粗细差不多。 常用的sans serif(无衬线字体)字体为Verdana、Arial、雅黑。)
    • font-style 字体风格 normal(默认)/itailc(斜体)/oblique(强制变斜)
    • font-weight 字体粗度 normal(默认)/bold(加粗)/bodler(更粗)/lighter(细)/数字(>=600 粗)
    • font-variant 字变形 noraml(默认)/small-caps(小型大写字母)
    • font-size 字体大小
    • font 统一设置

    font:[字体风格][字体变形][字体加粗]<字体大小><字体族科>

    	font:[style/weight/variant] size family
    

    颜色属性

    • color 值:英文(blue...)/rgb/16进制

    文本属性

    • letter-spacing 字母间隔 值为长度,可以是负值
    • word-spacing 单词间距
    • text-decoration 文字修饰
      • none
      • underline 下划线
      • overline 上划线
      • line-through 中划线 删除线
  • 相关阅读:
    Laravel -- Excel 导入(import) (v2.1.0)
    mysql触发器
    支付宝和微信支付的坑
    php 中的引用(&)与foreach结合后的一个注意点
    oatu2.0认证原理(转)
    python3:time类
    python3练习:针对某一日期增加或减少时间、天数
    python:datetime类常用内容
    python3练习:计算日期差
    python3练习:涉及序列
  • 原文地址:https://www.cnblogs.com/yan--li/p/7245061.html
Copyright © 2020-2023  润新知