zoukankan      html  css  js  c++  java
  • css

    css--是一种层叠样式表,应用于定义HTML元素的显示形式,是一种格式化网页内容技术,分为三种样式表。

    内嵌样式表: 作用域是单元素;

    <div style="color:red;fone-size:30px">div哈哈</div>

    内联样式表:作用域是单网页;

    首先在head定义 

     <style type="text/css">

         p {margin-left: 20px;}

    </style>

    然后在body里面直接用<p>就可以了

    外联样式表:作用域是多网页;

    首先新建一个网页

    在head部分

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

    三种样式表的优先级别是: 内嵌>内联=外联(内联与外联级别相同,看二者排列的顺序决定)

    css选择器

    常用的选择器是:元素选择器  元素{}

    类选择器class:   .名称{}

    id选择器:        #名称{}

    包含选择器(后代、后生选择器):    父类选择器 子选择器{}

    伪类(hover):    选择器:属性{} 

    子元素选择器:      父选择器>子选择器

    相邻兄弟选择器:    选择器+选择器

    权重值(四个等级)可以累加不可进位

    一 内嵌(开始标参 style)1000

    二 id    0100

    三 类选择  0010

    四元素     0001

     没有权重值*important  0000应用了优先级别最高。

    css层叠:样式表允许多种方式规定样式信息

    css继承:子元素从父元素继承属性

            可以继承的有:颜色、字体等

            不可以继承:外边距、内边距等

    a标签的四种状态

    1 a:link 无访问状态

    2 a:hover 鼠标移入

    3 a:visted 以访问

    4 a:active 被选择



    css样式

    背景(background)  

    颜色 p {background-color: gray;}

    图像     body {background-image: url(/i/eg_bg_04.gif);}

    图像大小  background-size

    重复  body { background-image: url(stars.gif);

                  background-repeat: repeat-y;}

    css文本

    p {text-indent: 5em;} 首行缩进(值可以是负值)

    text-decoration:none;去掉下划线

     水平对齐(左中右)

    h1 {text-align: center}

    h2 {text-align: left}

    h3 {text-align: right}

    子间距

    p.spread {word-spacing: 30px;}

    p.tight {word-spacing: -0.5em;}

    字母间距

    h1 {letter-spacing: -0.5em}

    h4 {letter-spacing: 20px}

    文本装饰  下划线  h3 {text-decoration:underline}

    自定义字体    font-family 

    字体加粗        font-weight 

    字体大小        font-size

    设置列表标记类型   ul {list-style-type : square}

    列表:

    定位list-style-position

    类型list-style-type

    图片list-style-image

    表格

    border-spacing  设置分隔单元格边框的距离

    轮廓

    设置轮廓颜色        outline-color

    设置轮廓宽度        outline-width

    设置轮廓样式        outline-style

    css框模型(盒模型)

    元素:element

    内边距:padding(没有负值)

    边框:border

    外边距:margin(可以是负值) 设定四个值则是:上、右、下、左 设定三个值则是:上、左右、下 设定二个值则是:上下、右左 设定一个值则是:四个方向值都是一样

    css边框

    设置没有边框 :border-style: none

    设置边框颜色 :border_color

    设置边框样式 :border-top-style:

    设置边框宽度: border-top-width

    border-right-width

    border-bottom-width

    border-left-width

    css定位(Positioning)三种机制四种属性 display 属性(改变框类型)

    display:none 不显示 display:block 块元素

    display:inline 行内元素样式 display:inline-block 块行内元素

    display与visibility区别 display:是脱离了文档流,它的位置会被后面占据 visibility:只是隐藏了,位置不可占据

    css三种定位机制: 文档流 普通流 浮动流(脱离文档流)脱离标准文档流 BFC环境  块级格式化上下文 触发(声明)通过浮动排列 orerflow:hiddon ifc 行内格式化上下文  1不需要触发 2转换成bfc环境 clear:both  清除浮动

    position属性 static:静态定位(其实默认定位也就是没有定位)

    relative:相对定位(相对原位置进行偏移)

    absolute:绝对定位(相对最初包含块,最近定位元素脱离文档流)

    fixed:固定定位(脱离文档流,屏幕定位)

    overflow: scroll   使用滚动条显示元素溢出内容

    vertical-align:text-top  设置元素的垂直对齐

    z-index:  设置元素的堆叠顺序(以定位元素为基准  整数在前  负数在后)

  • 相关阅读:
    Tensorflow Tutorial 2: image classifier using convolutional neural network Part-1(译)
    TensorFlow Tutorial: Practical TensorFlow lesson for quick learners
    TensorFlow Tutorial: Practical TensorFlow lesson for quick learners
    Builder Pattern(译)
    Mysql锁机制
    Monitorenter
    非静态内部类
    ConcurrentModificationException
    Http2.0协议
    Docker化 springboot项目
  • 原文地址:https://www.cnblogs.com/daiwei-/p/5427188.html
Copyright © 2011-2022 走看看