css（Cascading Style Sheet）叠层样式表。用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

一：样式三种控制方法

1、行内样式：

<div  style="height:100p; width:100px border:solid;  red;"></div>

2、内嵌式

(1)标签选择器                                                                                                                                                       优先级：标签选择器<class<id

<title></title>

<style type ="text/css">

div

{

width:100px;

height:20px;

border:solid 1px red;

}

</style>

<body>

<div></div>

</body>

（2）class选择器

<title></title>

<style type ="text/css">

div

{

width:100px;

height:20px;

border:solid 1px red;

color:green;

}

.c1

{

color:#F00(文字颜色);  (文字颜色显示class里面设置的颜色)

}

.c2

{

font-size:36px;

}

</style>

<body>

<div>  你好1</div>

<div class=“c1 c2”>  你好2</div>                                                                                               如果c1跟c2的样式有重复，c2的样式会将c1的样式覆盖了

<p class="c1">p标签也可以使用class选择器</p>                                                                       多个标签可以共用一个class,一个标签可以写多个class

</body>

（3）id选择器

<title></title>

<style type ="text/css">

div

{

width:100px;

height:20px;

border:solid 1px red;

color:green;

}

.c1

{

color:#F00(文字颜色);  (文字颜色显示class里面设置的颜色)

}

.c2

{

font-size:36px;

}

#d1

{

color:green;

}

</style>

<body>

<div>  你好1</div>

<div class=“c1 c2”>  你好2</div>                                                                                               如果c1跟c2的样式有重复，c2的样式会将c1的样式覆盖了

<p class="c1">p标签也可以使用class选择器</p>                                                                       多个标签可以共用一个class,一个标签可以写多个class

<div id="d1"  class = "c1">你好3</div>                                                                                      id不能重复也不能是多个的，显示d1的样式，因为优先级：标签选择器<class<id

</body>

3、链接式

<title>标题</title>

<link rel = "stylesheet" type="text/css"  href="css/demo.css(相对路径)"/>

4.导入样式（基本不用了，整个网页内容加载之后，才去加载样式表）

<title>标题</title>

<link rel = "stylesheet" type="text/css"  href="css/demo.css(相对路径)"/>

<style>

@import url(css/demo.css)

</style>

当同时有行内样式，内嵌式，链接式出现时，采取就近原则； css的注释：  /*   */  Html的注释：<!--                -->

二：css字体样式

#d1

{

font-size:24px;(字体大小)

font-family:"隶书"；（字体类型，电脑中有什么字体才能设置什么字体，C:\Windows\Fonts中看）

font-weight:700;(文字粗细，数值越大，字体加粗越厉害)

color:red;(字体颜色)

Text-decoration:underline    /*下划线*/

Text-decoration:overline     /*顶划线*/

Text-decoration:line-through; /*删除线*/

width:100px;

height:100px;

border:solid 1px red;

text-align:center/right/left(默认left);(水平居中)

line-height:100px;(lineheight值与高度相同)（垂直居中）

Text-transform:capitalize  /*单词首字大写*/

Text-transform:uppercase /*全部大写*/

Text-transform:lowercase /*全部小写*/

Letter-spacing:10px (默认为normal)（字符间距）

}

<div id="d1"><p>google（这里的p标签只继承了文字的特性）</p></div>

计算机-工具-文件夹选项-查看，找到显示文件扩展名那一栏，可显示文件的扩展名；

FScapture(取色，测量，可以去掉电脑上任何一个地方的颜色)

Html标签第二课css的更多相关文章

  1. HTML第二课——css【2】

    请关注公众号:自动化测试实战 现在继续上一节课的内容,看下面代码: <!DOCTYPE html><html><head>    <meta charset= ...

  2. 萌新接触前端的第二课——CSS

    前端知识——CSS CSS(英文全称:Cascading Style Sheets) 中文名层叠样式表,是一种用来表现HTML或XML等文件样式的计算机语言.CSS不仅可以静态地修饰网页,还可以配合各 ...

  3. HTML第二课——css

    请关注公众号:自动化测试实战 先给大家提个建议,就是用sublime编辑器来编写.用其他的也无所谓,我只是建议,因为这个会帮你自动补全很多代码. css概念 css叫层叠样式表.意思就是一层一层的叠加 ...

  4. CI(CodeIgniter)框架入门教程——第二课 初始MVC

    本文转载自:http://www.softeng.cn/?p=53 今天的主要内容是,使用CodeIgniter框架完整的MVC内容来做一个简单的计算器,通过这个计算器,让大家能够体会到我在第一节课中 ...

  5. 【JavaScript从入门到精通】第二课 初探JavaScript魅力-02

    第二课 初探JavaScript魅力-02 变量 说起变量,我们不得不提起我们有一部比较古老的电视剧叫<包青天>.包青天有一把非常厉害的宝剑叫“尚方宝剑”,见到尚方宝剑有如见到皇帝.某种程 ...

  6. 【JavaScript从入门到精通】第二课

    第二课 初探JavaScript魅力-02 变量 说起变量,我们不得不提起我们有一部比较古老的电视剧叫<包青天>.包青天有一把非常厉害的宝剑叫“尚方宝剑”,见到尚方宝剑有如见到皇帝.某种程 ...

  7. 【Web探索之旅】第二部分第二课：服务器语言

    内容简介 1.第二部分第二课:服务器语言 2.第二部分第三课预告:框架和内容管理系统 第二部分第二课:服务器语言 介绍了Web的客户端,我们来谈谈Web的服务器端. 既然客户端有客户端的编程语言(HT ...

  8. 【Linux探索之旅】第一部分第二课：下载Linux，免费的噢

    内容简介 1.第一部分第二课:下载Linux,免费的噢 2.第一部分第三课预告:测试并安装Ubuntu 下载Linux,免费的噢 大家好,上一课我们认识了非常“霸气侧漏”的Linux操作系统. 也知道 ...

  9. Asp.Net Web API 2(CRUD操作)第二课

    Asp.Net Web API 2(CRUD操作)第二课 Asp.Net Web API 导航   Asp.Net Web API第一课:入门http://www.cnblogs.com/aehyok ...

随机推荐

  1. eclipse绘制activiti无法生成图形

    今天使用eclipse绘制acitiviti,发现无法绘制图形,设置里面勾选也勾选了,同时activiti插件也是最新的,最后发现同时打开了两个eclipse窗口就不支持生成图形,看来只能开一个窗口了 ...

  2. jsonp的使用

    假设我们已经了解什么是同源策略,以及什么是浏览器的同源策略的限制. 现在我们需要在a.demo.com下的某个页面one.html 里加载不同域b.demo.com下的json数据. 我们都知道用&l ...

  3. struts2值栈内部数据结构详解

    值栈是struts2内部一片很重要的区域,我在初学的时候,发现对于值栈这个数据结构的理解不是很深刻.例如OGNLContext是什么,ActionContext和值栈有什么关系.为什么ActionCo ...

  4. JS原型的问题Object和Function到底是什么关系

    var F = function(){}; Objcert.prototype.a = function(){}; Function.prototype.b = function(){}; F 既能访 ...

  5. openssl stack 数据结构栈基本操作

    堆栈是两种不同的数据结构: 堆:数据先进先出: 栈:数据先进后观: 在stack.h 中 openssl 为我们提供了一个通用的栈,利用提供的接口我们可以方便的用此栈来存放开发中的任意数据. open ...

  6. 上标、下标~不常用的 html 标签

    <sup>上标 <sub>下标 <small>小号字 <del> 删除线 ======> 对应的 js stringObj.sup()  上标 s ...

  7. Unity3D 中的定时器

    不算上 C# 自带的,目前知道两种,以下分别介绍. 1.每帧检查 定义一个时间变量 timer,每帧将此时间减去帧间隔时间 Time.deltaTime,如果小于或者等于零,说明定时器到了,执行相应功 ...

  8. C指针的大小

    应该说这是一个非常基础的问题,教科书上说指针大小和机器字长相同,即32位机指针长度为4字节!但是对不对呢?为什么是这样? 搜了一下相关资料...居然发现回答不统一,很多人也同样是糊里糊涂. 下面对这个 ...

  9. JAVA类与对象

    Employee类: public class EmployeeTest { public static void main(String[] args) { // fill the staff ar ...

  10. C++内存管理的缩影

    都说C++内存管理是个大坑.实际上也确实是这样. C++有析构函数,每当一个对象过期的时候,C++会执行两个动作 1.执行析构函数. 2.将对象和对象的所有数据删除. 很多人就会问了,既然有把对象删除 ...