1.css的语法
  a.位置
    <head>
      <style type="text/css"> //css代码
      </style>
    </head>
  b.语法
    选择器{
      属性名1:属性值1;
      属性名2:属性值2;
    }
  例:h1{
      font-size:12px; //字体大小
      color:red; //字体颜色
    }
  注意:多个用属性用分号分隔
2.选择器
  a.标签选择器
  语法:
    标签名{
      ------
    }
  b.类选择器
  语法:
    .class属性值{
      -------
    }
  步骤:
    第一步:给指定的html标签加上class属性
    第二步:在style中写
        .class属性值{
          -------
        }

   

.green{
  font-size:20px;
  color:green;
}

 

  c.id选择器
  语法:
    #id属性值{

      ......
    }
  步骤:
    第一步:给指定的html标签加上id属性
    第二步:在style中写
        #id属性值{
          -------
        }

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
    <title>标签选择器的用法</title>
    <style type="text/css">
      #first{font-size:16px;}
      #second{font-size:24px;}
    </style>
  </head>
  <body>
    <h1>北京欢迎您</h1>
    <p id="first">北京欢迎您,有梦想谁都了不起!</p>
    <p id="second">有勇气就会有奇迹。</p>
    <p>北京欢迎您,为你开天辟地</p>
    <p>流动中的魅力充满朝气。</p>
  </body>
</html>

 

3.引用样式的方式
  a.行内样式
    使用style属性引入样式
    列:<h1 style="font-sze:16px;color:red;">xxx</h1>
  b.内部样式
    在head中写style
    列:h1{xxxx}
  c.外部样式
    把CSS代码保存在以CSS结尾的文件(层叠样式文件)
    把CSS文件引入html中
    引入方式两种:
      第一种:链接方式
        <link rel="stylesheet" href="文件路径" type="text/css"/>
      第二种:导入方式
          <style>
            @import url("文件路径")
          </style>
4.优先级
  行内样式>内部样式>外部样式(就近原则)
  id选择器>class选择器>标签选择器
5.高级选择器
  a.后代选择器
    父标签 子标签{
      ......
  }

   

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
    <title>后代选择器</title>
    <style type="text/css">
      h3 strong{color:blue;font-size:36px;}
      strong{color:red; font-size:16px;}
    </style>
  </head>
  <body>
    <strong>问君能有几多愁,</strong>
    <h3>恰似一江<strong>春水</strong>向东流.</h3>
  </body>
</html>

 

  b.交集选择器
    选择器(class选择器或者id选择器){
      ......
    }

   

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
    <title>交集选择器</title>
    <style type="text/css">
      p .txt{color:red;}
      p.txt{color:blue;line-height:28px;}
    </style>
  </head>
  <body>
    <h2>蝶恋花•庭院深深深几许</h2>
    <p class="txt">庭院深深深几许,杨柳堆烟,帘幕无重数。玉勒雕鞍游治处,楼高不见章台路。<br/>
    <strong class="txt">雨横风狂三月幕,门俺黄昏,无计留春住。</strong>泪眼问花花不语,任红飞过秋千去。</p>
  </body>
</html>

 

  c.并集选择器
    选择器1,选择器2,选择器3,......选择器n{
      ......
    }

   

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
    <title>并集选择器</title>
    <style type="text/css">
      h3,.first,.second,#end{font-size:16px;color:green;font-weight:normal;}
    </style>
  </head>
  <body>
    <h2>蝶恋花•庭院深深深几许</h2>
    <h3>庭院深深深几许,杨柳堆烟,帘幕无重数。</h3>
    <p class="first">玉勒雕鞍游治处,楼高不见章台路。</p>
    <p class="second">雨横风狂三月幕,门俺黄昏,无计留春住。</p>
    <p id="end">泪眼问花花不语,任红飞过秋千去。</p>
  </body>
</html>

 

初识CSS(1)的更多相关文章

  1. 初识CSS

    css解释 css样式: css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化,CSS的可以使页面更加的美观.基本上所有的html页面都或多或少的使用cs ...

  2. #WEB安全基础 : HTML/CSS | 0x1初识CSS

    "我受够这些难看的网页了,我怎么才能让它变得好看点?"你说. 我答道:"看来你得学点CSS了" 学习这些东西只有一个原则,就是用你的脑袋想,用你的眼睛看,用的你 ...

  3. 初识css预处理器:Sass、LESS

    这篇文章是初步介绍css预处理的,详细学习请移步官网~ 什么是css预处理器 CSS 预处理器是一种语言, 通俗易懂的话来说就是“用一种专门的编程语言,进行 Web 页面样式编写,再通过编译器转化为正 ...

  4. 初识CSS样式表

    背景介绍: 接触了新闻公布系统,这也是自己第一个B/S的项目.从之前的拖拽空间.任意布局到现在的HTML总会有非常多的新奇.棘手和挑战.可是不管是何种形式都离不开主要的步骤:做前台.做后端.能够说一个 ...

  5. web前端基础——初识CSS

    1 CSS概要 CSS(Cascading Style Sheets)称为层叠样式表,用于美化页面(单纯HTML写的页面只是网页框架和内容的组合,相当于赤裸的人,而CSS则是给赤裸的人穿上华丽的外衣) ...

  6. 前端基础 & 初识CSS

    CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素.l 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS语法 每个CS ...

  7. 新手前端笔记之--初识css

    css样式表是为了容纳与html文档分离出来的样式属性而产生的,所以她理所当然的包含两个部分:1.样式的表示,使用{属性1:属性值:属性2:属性值:...},2.样式与标签的对应(如何找的对应标签), ...

  8. CSS——NO.1(初识CSS)

    */ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:text.cpp * 作者:常轩 * 微信公众号:Worldhe ...

  9. 0008 CSS初识(行内式、内部样式表、外部样式表)

    typora-copy-images-to: media 第01阶段.前端基础.CSS初识 CSS层叠样式表 学习目标 理解 css的目的作用 css的三种引入方式 应用 css三种引用方式的书写 通 ...

随机推荐

  1. 编译原理课后习题答案令A,B和C是任意正规式,证明以下关系成立(A|B)*=(A*B*)*=(A*|B*)*

    题目: 令A.B和C是任意正规式,证明以下关系成立: A∣A=A (A*)*= A*         A*=ε∣A A*        (AB)*A=A(BA)*        (A∣B)*=(A*B ...

  2. oradebug工具使用(转载)

    在之前的HangAnalyze 中有使用oradebug命令,在这篇文章里,我们主要是重点看一下这个oradebug命令: Oracle HANGANALYZE 功能诊断 DB hanging htt ...

  3. 解决hash冲突的办法

    1.开发定址法 2.再哈希法 3.链地址法 4.建立一个公共溢出区

  4. React:快速上手(1)——基础知识

    React:快速上手(1)——基础知识 React(有时叫React.js或ReactJS)是一个为数据提供渲染为HTML视图的开源JavaScript库,用于构建用户界面. JSX.元素及渲染 1. ...

  5. C++模板专门化与重载

    最近在复习C++有关知识,又重新看<<Effective C++>>,收获颇丰.原来以前看这边书,好多地方都是浅尝辄止.<<Effective C++>> ...

  6. 求组合数的方法:转载自VincentCZW的博客

    遇到了就查了下:地址:http://www.cnblogs.com/BeyondAnyTime/archive/2012/05/18/2508189.html 求一个组合数Cnm的值,Cnm= n! ...

  7. HDU - 6430 Problem E. TeaTree 2018 Multi-University Training Contest 10 (LCA+枚举因子)

    题意:一棵树,每个点都有自己val(1 <= val <= 1e5),而任意两个点u,v可以对lca(u,v) 产生gcd(valu,valv)的贡献,求每个点能接受到来自子树贡献的最大值 ...

  8. linux比较两个文件的不同(6/21)

    cmp 命令:比较任意两个类型的文件,且吧结果输出到标准输出,默认文件相同不输出,不同的文件输出差异 必要参数 -c 显示不同的信息-l 列出所有的不同信息-s 错误信息不提示 选择参数 -i< ...

  9. 【传感器】BMA253 数字,三轴加速度传感器

    参考文档:BMA253E DataSheet 参考文档链接 密码:9new BMA253 数字,三轴加速度传感器 关键特性: 关键特性   封装方式 LGA封装(12pins),长*宽(2mm*2mm ...

  10. Your app uses or references the following non-public APIs的解决方案

    之前接了一个旧的项目,代码混乱,年代久远,不得不吐槽一波,好不容易改完需求提交代码,说用到了non-public APIs,搞了好久终于找到地方了,下面是我的解决过程,让大家少走弯路: 下面的被驳回的 ...