zoukankan      html  css  js  c++  java
  • CSS用法介绍

    什么是div?
    div就是HTML一个普通标签,进行区域划分。特性:独占一行。肚子不能实现复杂效果。必须结合CSS样式进行渲染。
    div是块级元素
    作用:
    div标签可以把文档分割为独立的、不同的部分。他可可以用作严格的组织工具,并且不使用任何格式与其关联。
    什么是CSS?
    Cascading Style Sheets层叠样式表。
    【CSS】的概述;
    CSS 通常称为CSS样式或者层叠样式表,主要用于设置HTML页面中的文本内容(字体、大小、对其方式等)、图片的外形(高度、边框样式、边距等)以及版面的布局等外观显示样式。
    CSS可以使HTML页面更好看,CSS色系的搭配可以让用户更舒服,CSS+DIV布局更加灵活,更容易绘制出用户需要的结构。
    【CSS的作用】
    CSS主要用来修饰HTML的显示,代码复用,将页面元素与样式进行分离。
    【CSS的使用】(语法&方法)
    标记选择器是指用HTML标记名称作为选择器,按标记名称分类,为页面中某一类标记指定统一的CSS样式。
    【元素选择器】
    语法:
    选择器(属性1:属性值;属性2:属性值;....)
    eg: <style>
    h2{
    color:red;
    font-size:100px;
    }
    </style>
    【CSS的引入方式】
    行内样式:
    直接在html的元素上使用style的属性编写CSS;
    <span style="color:#00FF00 ;font-size:100px">行内样式</span>
    内部样式;
    在html的<head>标签中使用<style>标签来定义CSS
    <style>
    span{
    color:blue
    font-size:200px;
    }
    </style>
    外部样式;
    将CSS定义成一个.css文件,在html中将该文件引入到html中
    <link href="style.css" rel="stylesheet" type="text/css"/>
    【CSS的基本选择器】
    元素选择器:
    div{
    color:red
    }
    id选择器:
    <style>
    #d1{
    color:red
    }
    </style>
    <div id="d1">id选择器</div>
    id通常都是唯一的。
    类选择器:
    HTML:
    <div class="d1">类选择</div>
    <div>选择</div>
    <div class="d1">选择类</div>
    CSS;
    <style>
    .d1{
    color:green;
    }
    </style>
    【CSS的悬浮】
    float属性中常用取值;
    left :悬浮到左边
    right ;悬浮到右边
    使用clear属性清除浮动;
    left :清除左侧浮动
    right :清除右侧浮动
    both ;清除两侧的浮动
    【转换】;display
    HTML提供丰富的标签,这些标签被定义成了不同的类型,一般分为;块标签和行内标签。
    块标签: 以区域块方式出现。每个块标签肚子占据一整行或者多整行。 常见的块元素;<h1><div><ul>等。
    行内元素; 不必在新的一行开始,同时也不强迫其他元素在新的一行显示。常见的行内元素;<span><a>等。
    【CSS的其他选择器】
    属性选择器:
    选中带有某个属性的元素:
    <style>
    input[type="text"]{
    background-color:yellow;
    }
    input[type="password"]{
    background-color:green;
    }
    </style>
    层级选择器;
    ul li{
    }
    父选择器 子选择器{ }
    <style>
    #d1 div{
    color:red;
    }
    </style>
    伪类选择器; 主要用来描述超链接
    <style>
    a:link{
    color:blue;
    }
    </style>

    使用DIV+CSS对注册页面进行布局。更加灵活!
    【DIV+CSS】
    【CSS】的盒子模型
    英文: border(边框)margin(外边框)padding(内边距)element(元素)
    设置盒子的外边距 margin:
    Margin-top
    Margin-right
    Margin-bottom
    Margin-left
    设置盒子的内边距;padding
    Padding-top
    Padding-right
    Padding-bottom
    Padding-left

  • 相关阅读:
    jQuery
    jQuery
    jQuery Callback 函数
    怎样提高团队管理能力4
    poj 3461 Oulipo(KMP模板题)
    每日一小练——按字典顺序列出全部排列
    Java数据结构与算法之排序
    China Vis 2015 会议小结
    网络基础知识小小说
    NS3网络仿真(7): Wifi节点
  • 原文地址:https://www.cnblogs.com/wzmd/p/6224406.html
Copyright © 2011-2022 走看看