zoukankan      html  css  js  c++  java
  • CSS 笔记

    CSS 语言:
    CSS 指层叠样式表 (Cascading Style Sheets)
    样式定义如何显示 HTML 元素
    样式通常存储在样式表中
    把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
    外部样式表可以极大提高工作效率
    外部样式表通常存储在 CSS 文件中
    多个样式定义可层叠为一

    样式规则:
    一是内联样式表也可以称为内嵌
    <h1 style = "color: red">红色标题</h1>
    特殊的样式需要应用到个别元素时,写在标签开始的标记中,其作用范围仅限于应用它的网页元素。方法是在相关的标签中使用样式属性,样式属性可以包含任何CSS语言

    二是内部样式表(相对于内嵌样式表来说是内联)
    <head>
    <style type ="text/css">
    样式的定义
    </style>
    </head>
    单个文件需要特殊样式时使用,写在网页的<head>部分,其它作用范围仅限于该网页
    style:样式定义

    三是外部样式表也叫外联
    <head>
    <link rel = "stylesheet" type ="text/css" href = "样式表达css文件名"/>
    </head>
    当再使用很多页面的时候使用,引入在页面的<head>部分。使用<link>
    link:定义资源引用


    css优先级及权重划分:
    一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字 4 拥有最高的优先权。
    优先级;
    浏览器缺省设置(浏览器的默认样式设置)
    外部样式表
    内部样式表(位于<head>标签内部)
    内联样式(在html元素内部)优先权最高


    多个定义时权重划分:
    1是内嵌默认为1000
    2是ID默认为0100
    3是类选择默认为0010
    4是元素默认为0001
    还有一种为没有权重值 *important 为0000
    用!important其他的权重值失效

    常用选择器的使用
    id # id名称{ 作用的内容 }
    class .名称{ 内容 }
    元素 元素{ 内容 }
    包含 父类选择器(空格)子类选择器{ 内容 }
    伪类 选择器(冒号:)属性{ 内容 }

    主要:css继承 子元素从父元素继承属性,但是不是所有的都可以继承
    颜色,大小,字体等等可以继承
    显示,边框,块等是不能继承的

    不可继承的:display(显示)、margin、border(边框)、padding(边距)、background(背景)、height(高度)、min-height、max-height、width(宽度)、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。
    所有元素可继承:visibility(显示)和cursor。
    内联元素可继承:letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。
    终端块状元素可继承:text-indent和text-align。
    列表元素可继承:list-style、list-style-type、list-style-position、list-style-image。
    表格元素可继承:border-collapse。

    定位分为相对定位和绝对定位
    相对定位特征:
    使用CSS样式规则{position:relative}来对定位进行声明;
    使用一到多个便移属性{top right bottom left}相对于他们在正常文档流中的初始位置进行定位
    没有设置位置偏移属性的,默认被设置为auto
    在文档流中所占据的原始空间被保留
    可能会覆盖其他元素

  • 相关阅读:
    ES6新特性
    浏览器兼容问题
    跨域
    箭头函数与普通函数的区别
    单页面应用
    vue试题
    Git 常用命令
    【分享代码】一个笨办法获取容器的剩余内存
    【笔记】thanos receiver的router模式
    【分享】让prometheus支持PUSH模式,可以使用remote write协议推送数据
  • 原文地址:https://www.cnblogs.com/zacy110/p/5427636.html
Copyright © 2011-2022 走看看