• 前端笔记之css


    CSS

    1,css的概念

    css是层叠样式表

    css是用来美化html标签的,相当于给页面化妆

      css写在head中

    2,选择器

    选择器是一个选择谁(标签)的过程

    写法

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

    属性 解释
    20px;
    height:20px;
    backgroud-color:red; 背景颜色
    font-size:24px; 文字大小
    text-align:left|center|right 内容的水平对齐方式
    text-indent:2em; 首行缩进
    color:red 文字颜色

      基础选择器

        标签选择器

          写法:  标签{属性:值;}

          颜色的显示方式

            直接写颜色的名称

            十六进制显示颜色

              0-9  a-f

              #000000;前2位代表红色,中间2位代表绿色,后边两位代表蓝色。

                如果6位值都一样那么可以只写3位

            RGB

              rgb(120,120,120)

            RGBA

              A代表alpha 不透明度  0-1

        类选择器(重点)

          写法:  .自定义类名{属性:值;  属性:值;}

          特点:   谁调用,谁生效。

              一个标签可以调用多个选择器

              多个标签可以调用同一个选择器

              不建议使用汉字来定义类名

              不推荐使用属性或者属性的值来定义类名

          类选择器的命名规则

            不能数字开头来定义类名

            不能使用特殊字符,除了"_"

        ID选择器

          写法:  #自定义名称{属性:值;  属性:值;}

          特点:  一个ID选择器在一个页面只能调用过一次

               一个标签只能调用一个ID选择器

               可以同时调用类选择器和ID选择器

        通配符选择器  不推荐使用

          写法:  *{属性:值;  属性:值;}

          特点:  给所有的标签都使用相同的样式

      复合选择器

      概念:两个或者两个以上的基础选择器通过不通的方式连接在一起

        交集选择器

          写法:标签+类{属性:值;  属性:值;}

        后代选择器

          写法:选择器+空格+选择器{属性:值;  属性:值;}

          特点:

            无限迭代

            只要能代表标签,标签、类选择器、ID选择器自由组合

        子代选择器

          写法:选择器>选择器{属性:值;  属性:值;}

        并集选择器

          写法:选择器,选择器{属性:值;  属性:值;}

    文本元素

      属性

        font-size:16px;  文字大小

        font-weight:700;  文字粗细,值从100-900,不推荐使用font-weight:blod;

        font-family:微软雅黑;  文字的字体

        font-style:normal(正常)| italic(斜体);  文字的风格

        line-height:  行高

      文本属性的连写

        写法:font:italic 700 16px/40px 微软雅黑

        文本属性连写大小和字体为必写项

        顺序 font:风格 粗细 大小/行高 字体

      文字的表达方式

        直接写中文名称。

        字体的英文名称

        字体的Unicode编码

      如何查找字体的unicode编码

        打开浏览器→f12→console→escape("宋体")

          

  • 相关阅读:
    242. Valid Anagram
    [wikioi]关押罪犯
    [wikioi]数的划分
    [wikioi]能量项链
    [wikioi]线段覆盖 2
    [wikioi]乌龟棋
    POJ1011 Sticks
    *[leetcode]Word Break II
    [leetcode]Word Break
    《高性能网站建设指南》笔记
  • 原文地址:https://www.cnblogs.com/yehewudi/p/8890627.html
Copyright © 2020-2023  润新知