码迷,mamicode.com
首页 > Web开发 > 详细

9.02_css

时间:2020-03-12 09:52:13      阅读:60      评论:0      收藏:0      [点我收藏+]

标签:float   css   ref   浮动   ott   页面   原则   sheet   bsp   

一、CSS概述

?   Cascading Style Sheets : 层叠样式表

  主要用作用:

    ? 用来美化我们的HTML页面的

    ? HTML 决定网页的骨架 ,CSS 化妆

?    将页面的HTML和美化进行分离

    CSS的简单语法:

    ? 在一个style标签中,去编写CSS内容,最好将style标签写在这个head标签中

    <style>
      选择器{
      属性名称:属性的值;
      属性名称2: 属性的值2;
      }
    </style>

    CSS选择器: 帮助我们找到我们要修饰的标签或者元素

    元素选择:

    元素的名称{
      属性名称:属性的值;
      属性名称:属性的值;
    }

    ID选择器:

    以#号开头 ID在整个页面中必须是唯一的s
    #ID的名称{
    属性名称:属性的值;
    属性名称:属性的值;
  }

  类选择器:

    以 . 开头
    .类的名称{
    属性名称:属性的值;
    属性名称:属性的值;
    }

    CSS的引入方式:

?     外部样式: 通过link标签引入一个外部的css文件

    ? 内部样式: 直接在style标签内编写CSS代码

?     行内样式: 直接在标签中添加一个style属性, 编写CSS样式

    CSS浮动 : 浮动的元素会脱离正常的文档流,在正常的文档流中不占空间

    float属性:
    left
    right

    clear属性: 清除浮动
    both : 两边都不允许浮动
    left: 左边不允许浮动
    right : 右边不允许浮动
    流式布局

 

二、CSS的优先级

  按照选择器搜索精确度来编写: 行内样式 > ID选择器 > 类选择器 > 元素选择器

就近原则: 哪个离得近,就选用哪个的样式

  - CSS中的其它选择器

    - 选择器分组: 选择器1,选择器2{ 属性的名称:属性的值}

    - 属性选择器:

    a[title]
    a[titile=‘aaa‘]
    a[href][title]
    a[href][title=‘aaa‘]

    - 后代选择器: 爷爷选择器 孙子选择器 找出所有的后代

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

    - 伪类选择器: 通常都是用在A标签上

三、CSS的盒子模型: 万物皆盒子

  内边距:

  padding-top:

  padding-right:

  padding-bottom:

  padding-left:

  padding:10px; 上下左右都是10px
  padding:10px 20px; 上下是10px 左右是20px
  padding: 10px 20px 30px; 上 10px 右20px 下30px 左20px
  padding: 10px 20px 30px 40px; 上右下左, 顺时针的方向 

  外边距:

  margin-top:

  margin-right:

  margin-bottom:

  margin-left:

 

  CSS绝对定位:

  ? position: absolute

  ? top: 控制距离顶部的位置

?   left: 控制距离左边的位置

 

9.02_css

标签:float   css   ref   浮动   ott   页面   原则   sheet   bsp   

原文地址:https://www.cnblogs.com/zyyzy/p/12457808.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!