• CSS


    CSS  层叠样式表 (Cascading Style Sheets)

    用于解决内容和表现分离的问题

    一、语法

    CSS注释以 "/*" 开始, 以 "*/" 结束

    1、选择器

      1、标签选择器如:p、h1等

      2、id选择器  #id (id 在html元素中设置)  全局唯一

      3、class选择器 1 .center  所有拥有center类的元素

              2. p.center  p中拥有center的元素

      顺序:id>class>标签

      4、特殊用法:子选择器(body>p)、相邻选择器(.class+p)、相邻及以下选择器(.class~p)

      5、伪类结构选择器( :first-child/last-child/nth-child(i)需要自身/nth-of-type不需自身)

      6、属性选择器 p[id*=xx] p标签下有id属性的元素 且等于xx

      注 :=绝对等于  *=包含等于 ^=以。。开头  $=以。。结尾

    二、创建

      1、外部样式表

      通过<link>标签链接到样式表

    <head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    </head>

      2、内部样式表

      在<head>标签内定义<style>

    <head>
    <style>
    hr {color:sienna;}
    }
    </style>
    </head>

      3、内联样式表

      在HTML元素中定义,但会丢失CSS的优势

    <p style="color:sienna;margin-left:20px">这是一个段落。</p>

    注:多重样式的优先级:

    就近原则  跟代码顺序有关

    内联样式)Inline style > (内部样式)Internal style sheet >(外部样式)External style sheet > 浏览器默认样式

    伪类 :hover悬浮 :active 按住 :link未访问 :visited已访问
     
    三、美化网页元素
    span标签 通常重点要突出的字使用span套起来;
    1、 字体样式
    Property描述
    font 在一个声明中设置所有的字体属性
    font-family 指定文本的字体系列
    font-size 指定文本的字体大小
    font-style 指定文本的字体样式
    font-variant 以小型大写字体或者正常字体显示文本。
    font-weight 指定字体的粗细。
        <style>
            body{
                font-family: "Apple Chancery";
                font-size: 50px;
                font-weight: bold;
                color: red;
            }
        </style>
       <style>
            body{
                font: bolder 10px "Andale Mono";
            }
        </style>
    2、文本样式
    属性描述
    color 设置文本颜色 rgba(0,0,0,0) a透明度
    direction 设置文本方向。
    letter-spacing 设置字符间距
    line-height 设置行高 与块高度一致
    text-align 对齐元素中的文本
    text-decoration 向文本添加修饰  underline/linethrough/overline/none 划线
    text-indent 缩进元素中文本的首行
    text-shadow 设置文本阴影  颜色,水平偏移、垂直偏移、阴影半径
    text-transform 控制元素中的字母
    unicode-bidi 设置或返回文本是否被重写 
    vertical-align 设置元素的垂直对齐 图片与文字一行对齐 middle
    white-space 设置元素中空白的处理方式
    word-spacing 设置字间距

    3、列表样式

    属性描述
    list-style 简写属性。用于把所有用于列表的属性设置于一个声明中
    list-style-image 将图像设置为列表项标志。
    list-style-position 设置列表中列表项标志的位置。
    list-style-type 设置列表项标志的类型。circle/none

    4、背景

    颜色、图片、图片位置、平铺方式

    background 简写属性,作用是将背景属性设置在一个声明中。
    background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
    background-color 设置元素的背景颜色。
    background-image 把图像设置为背景。 url(" ")
    background-position 设置背景图像的起始位置。
    background-repeat 设置背景图像是否及如何重复。repeat-x/y no-repeat

    渐变:可以找网站

    四、盒子模型

    margin:外边距    padding:内边距   border:边框

      1、边框

      border: 1px soild/dashed red;

      2、外边距

      margin :0 auto;

      3、内边距

      padding :0 auto;

      4、圆角边框

      border-radius = 10px 10px 20px 1px; 左上 右上 右下 左下 顺时针

      盒子阴影

      box-shadow = 10px 10px 20px 1px yellow; 

    五、浮动

      display: inline/block/inline-block; 将行元素变为行内/块元素/内联

      float: left/right;

    父级边框塌陷

      clear:right/letf/both/none 不允许浮动的位置

      1.增加父级元素高度、元素有了固定高度会被限制
      2.浮空后增加空div标签 清除浮动
      3.父级元素overflow: hidden 隐藏 
      4.父类添加添加伪类:推荐
    #father:after{
            content:' ';
            display:block;
            clear:both;
    }

    六、定位

      1.相对定位 相对原来位置进行偏移

      position: relative

      top:-20px;

      left:20px

      

      2.绝对定位:

      没有父级元素定位的情况下相对于浏览器定位

      有父级元素相对于父级元素定位,原来位置不保留。

      position: absoulte;

      left:20px

       

      3.固定定位: 位置不变
      position: fixed;
      
     
      4.z-index
      z-index :0    最底层是0~
  • 相关阅读:
    git merge & git rebase 你用哪一个?
    [牛客题霸-高频算法面试题]一样的水
    [牛客题霸-高频算法面试题]那些插队的人
    解决ionic5多个模态关闭一个其他不显示的问题
    Selenium面试题+答案
    记删除AlibabaProtect.exe的经历
    免费的接口数据测试API
    删除重复的电子邮箱-leetcode
    firewall命令行详解
    将群晖恢复到出厂设置
  • 原文地址:https://www.cnblogs.com/huchengxi/p/12500931.html
Copyright © 2020-2023  润新知