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. RequireJS 快速入门

      说明:本文只提供快速入门内容,方便快速进入实战状态.更高级的配置,请参考官网文档. 当初之所以使用 RequireJS 等工具,是因为想提高js的加载速度,避免不必要的堵塞.但通过一段时间的使用, ...

  2. 急训 Day 1 （2）

    Mushroom的区间[题目描述]Mushroom有一行数,初始时全部是0.现在Mushroom有m个区间[L,R],他希望用以下操作得到新的序列.从m个给定区间中选择一个区间[s,t],把区间中的数 ...

  3. C#常用错误

    解决方法: 在配置文件连接数据库设置后加 MultipleActiveResultSets=true; <add key="ConnectionString" value=& ...

  4. CSS伪类和伪元素

    一.伪类 CSS伪类用于向某些选择器添加特殊的效果,在W3规范中,CSS伪类有如下几个: CSS2.1 :active:向被激活的元素添加样式(激活是指点击鼠标那一下) :focus:向拥有键盘输入焦 ...

  5. 参考__Larvel

    环境搭建 Vagrant PSR规范 PHP 标准规范(中文版)PHP 标准规范(Github版)PHP 标准规范官网 社区 laravel-china官网Larvel学院

  6. jsp中jstl标签的类似 if - else 语句 的语法

    在jsp中引入jstl的标签库和函数库 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c&q ...

  7. 解决: org.iq80.leveldb.DBException: IO error: C:\data\trie\000945.sst: Could not create random access file.

    以太坊MPT树的持久化层是采用了leveldb数据库,然而在抽取MPT树代码运行过程中,进行get和write操作时却发生了错误: Caused by: org.fusesource.leveldbj ...

  8. jquery实现on/off开关按钮

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  9. MySQL update时使用联表，聚合

    原文地址 http://stackoverflow.com/questions/3022405/mysql-update-query-with-left-join-and-group-by UPDAT ...

  10. (01-02) odoo8.0_Ubuntu14.04_nginx反代理设置

    作者:陈伟明联系 :  QQ 942923305 | 微信 toby942923305E-mail: cwm.win@hotmail.com============================== ...