zoukankan      html  css  js  c++  java
  • css代码引入方式与基本选择器

    引子

    css功能:对html元素进行渲染布局

    1.查找标签元素

    2.操作标签(加对应的css属性)

    由两个主要的部分构成:选择器,以及多条声明

    ====================================

    css代码引入方式

    一、行内式(不涉及查找,跟html绑定,难维护)

    <p style="color: red;font-size: 24px">hello world</p>

    二、嵌入式:head标签内嵌style标签

      选择器

        标签选择器

        id选择器  优先级最高  #

        类选择器  .

        通用选择器  *

      选择器优先级 

      组合选择器 

    三、文件链接式(项目选用)

    head标签中添加link标签链接独立的css文件

    <link rel="stylesheet" href="index.css">

    四、盒子模型

    margin:用于控制元素与元素之间的距离

    padding:用于控制内容与边框的距离

    border(边框):围绕在内边距和内容外的边框

    content(内容):盒子的内容,显示文本和图像

    盒子自适应居中

    float属性

    补充:

    伪类:只适用于a标签,专用于控制链接的显示效果

    link:定义链接的常规状态。

    hover:鼠标放到链接上的状态,用于产生视觉效果。

    active:在链接上按下鼠标时的状态。

    visited:访问过的链接

    before after伪类没有限制标签 

    注:/*操作标签必须是悬浮标签的子元素*/

    选择器优先级

    标签选择器:1;
    class选择器:10;
    id选择器:100;
    内嵌:1000

    !important 最大

    <div class="new">
      newDIV
      <p style="color: aqua">new P</p>
    </div>

    继承:子承父业(只能继承与文本相关的属性)

     文本属性

    文本颜色

    文本对齐方式

    文本其他属性

    1.字体

    verticle-align:middle/top/baseline/px

    背景属性

    no-repeat center url=""

    边框属性

    width

    height

    border-color

    border-style

    border-width

    border:5px solid blue

    列表属性

    list-style:square/none

    display属性:

    none block inline inline-block

    inline-block与float

    msrgin-left

  • 相关阅读:
    一个简单的ASP.NET MVC异常处理模块
    通过源码了解ASP.NET MVC 几种Filter的执行过程
    跨站请求伪造
    显示实现接口
    数组为什么可以使用linq查询
    编写轻量ajax组件03-实现(附源码)
    事件
    编写轻量ajax组件02-AjaxPro浅析
    委托
    静态构造函数
  • 原文地址:https://www.cnblogs.com/geek-ace/p/7208917.html
Copyright © 2011-2022 走看看