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. Signatures of Mutational Processes in Human Cancer

    http://cancer.sanger.ac.uk/cosmic/signatures#

  2. 如何隐藏winform中报表设计器中的按钮

    https://www.devexpress.com/Support/Center/Question/Details/T246117 DesignMdiController.SetCommandVis ...

  3. java文章显示内容部分(将html转成纯文本)

    public static String splitAndFilterString(String input, int length) { if (input == null || input.tri ...

  4. 更改eclipse的Package Explorer的字体

    说一个牛B的不像实力派的东西 — 更改eclipse的Package Explorer的字体1. 打开eclipse目录/Applications/Eclipse.app/Contents/Eclip ...

  5. 图片的DataURL技术

    DataURL基本原理 在网页中我们通常用下面的方式来引用一张图片,这样当我们请求网页的时候,浏览器也会想服务器发起一个请求,去请求这张图片. <img src='images/test.jpg ...

  6. Node.js 基础库

    全局对象 Node.js 中的全局对象是 global,所有全局变量(除了 global 本身以外)都是 global对象的属性. 我们在 Node.js 中能够直接访问到对象通常都是 global ...

  7. windows下如何安装和启动MySQL

    1.下载,解压到自己喜欢的目录 2.配置环境变量.MYSQL_HOME,值为mysql的根目录:在path中添加%MYSQL_HOME%/bin目录. 3.向windows注册mysql服务.必须用管 ...

  8. Android开源测试框架学习

    近期因工作需要,分析了一些Android的测试框架,在这也分享下整理完的资料. Android测试大致分三大块: 代码层测试 用户操作模拟,功能测试 安装部署及稳定性测试 代码层测试 对于一般java ...

  9. select 和 input 的不可编辑，input隐藏

    select 没有readOnly属性 在jsp中 <select  id="a" name="a" disabled="disabled&qu ...

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

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