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. 模板继承（extend）——（Day68）

    模板继承 (extend) Django模版引擎中最强大也是最复杂的部分就是模版继承了.模版继承可以让您创建一个基本的“骨架”模版,它包含您站点中的全部元素,并且可以定义能够被子模版覆盖的 block ...

  2. PAT 天梯赛 L1-041. 寻找250 【水】

    题目链接 https://www.patest.cn/contests/gplt/L1-041 AC代码 #include <iostream> #include <cstdio&g ...

  3. LightOJ - 1336 Sigma Function(约数和+整数拆分)

    题干中给出函数公式: 其中pi为n的每个素因数,ei为其个数.设该函数为F(x),其意义为x的约数之和.问在1-n中有多少x,令F(x)为偶数. 分析:设f(p)为(p^(e+1)-1)/(p-1). ...

  4. Linux centos7 zookeeper集群搭建

    Zookeeper集群搭建 描述:本章节主要单服务器搭建集群,在一个服务器上启动多个不同端口的zookeeper服务,非真实环境. 真实环境下zookeeper集群会搭建在多个物理服务器上,并非单一的 ...

  5. Linux内核参数之rp_filter

    一.rp_filter参数介绍 rp_filter参数用于控制系统是否开启对数据包源地址的校验. 首先看一下Linux内核文档documentation/networking/ip-sysctl.tx ...

  6. oracle 11g的卸载

    oracle 11g 的卸载主要有两种方式:一种是使用Oracle Universal Installer管理工具,该工具以向导模式进行,比较简单.这里主要讲解第二种卸载数据库的方式-----使用”d ...

  7. APPIUM API整理（python）---元素查找

    最近在学习自动化框架appium,网上找一些API相关资料整理了一下 1.find_element_by_id find_element_by_id(self, id_): Finds element ...

  8. .NET Framework(CLI,CLS,CTS,CLR,FCL,BCL)

    最下层蓝色部分是.NET Framework的基础,也是所有应用软件的基础..NET Framework不是凭空出来的,实际上API,COM+,和一些相关驱动依然是它的基石..NET Framewor ...

  9. Mac安装搭建sublimeText3开发Nodejs环境

    原文] [基本环境 安装Nodejs 这个直接就可以去官网下载就可以了.Nodejs官网 根据自己的PC系统类型选择对应的版本下载之后就可以了. 安装SublimeText3 这个也是直接去Subli ...

  10. JMS-activeMq点对点模式

    上一篇对JMS进行介绍了一下,接下来总结一下activemq点对点模式以及订阅发布模式. (1)下载:首先到官网http://activemq.apache.org下载activemq (2)运行:解 ...