CSS（Cascading Style Sheets,层叠样式表），控制页面样式外观，作用是美化HTML网页。

一、 样式表的基本概念

1、样式表的分类

（1）内联样式表  -----放在元素的开始标记中，只对当前元素起作用，和html联合显示，控制精确，但是可重用性差，冗余多。

例：

<input name="txt" style="border:0px; border-bottom:1px solid black;" type="text" />

例：

显示结果：

（2）内嵌样式表 -----作为一个独立区域，内嵌在网页里，可以对整个页面起作用，必须写在<head></head>之间。

例：

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

input

{

border:5px;                         <style之间的是内嵌样式表，在<head></head>之间-->

color:#3F6;

border-bottom:3px solid red;

}

</style>

</head>

<body>

<input type="text" name="a1" id="a1">

<input type="buttom" name="a2" id="a2" value="按钮">

<p>你好</p>               <!--input之外的不变，没影响-->

</body>

显示结果：

（3）外部样式表 -----放在一个单独的.CSS样式表文件中，可以对整个网站起作用。

操作方式：新建一个.CSS文件，用来存放样式表——>在HTML中调用样式表，要在HTML中点右键——>CSS样式表——>附加样式表。样式表一般用link连接方式。

1、外部样式表的定义。

例：

@charset "utf-8";

/* CSS Document */

input

{

border:5px;

color:#3F6;

border-bottom:3px solid red;

}

2、外部样式表的调用。

例：

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<link href="file:///E|/网页/Untitled-2.css" rel="stylesheet" type="text/css" />             <!--link连接的外部样式表-->

</head>

<body>

<input type="text" name="a1" id="a1">

<input type="buttom" name="a2" id="a2" value="按钮">

<p>你好</p>

</body>

显示结果：

CSS样式表------第一章：样式表的基本概念的更多相关文章

  1. SQL Server(第一章) 创建表 删除表 创建主键约束、唯一约束、外键约束、CHECK约束、默认约束

    1.Employees员工表 /** 创建Employees员工表 **/ USE TSQL2012 IF OBJECT_ID('dbo.Employees','U') IS NOT NULL DRO ...

  2. 关于CSS学习的第一章

    1.CSS三种书写的方式:嵌入式.外链式.行内式 嵌入式就是将CSS写入在<style></style> 外链式将外面的CSS文件通过HTML中的标记链接过来:<link ...

  3. 第一章：Lambda表达式入门概念

    要点:将行为像数据一样传递. 一.几种形式 1.没有参数,用()表示 () ->System.out.println("Hello World"); 2.有且仅有一个参数,省 ...

  4. CSS中的各个选择节点，都有样式最后一个无样式的快捷解决方法

    2.1.3 多标签 多标签选择器一般和html上下文有关,它有以下集中分类 选择一个祖先的所有子孙节点,例如 div p{…} 选择一个父元素的所有直属节点,例如 div > p{…} 选择某一 ...

  5. from表单、css选择器、css组合器、字体样式、背景属性、边框设置、display设置

    目录 一.form表单 1.form表单功能 2.表单使用原理 二.前端基础之css 1.关于css的介绍 2.css语法 3.三种编写CSS的方式 3.1.style内部直接编写css代码 3.2. ...

  6. CSS 小结笔记之三种样式表

    CSS 引入共有三种方式:内部样式表,内联样式(行内样式)表,外部样式表,当然也可以使用多重样式 内联样式 <div style="color:red;font-size:20px&q ...

  7. CSS学习（3）样式表

    如何插入样式表 插入样式表的方法有三种: 外部样式表(External style sheet) 内部样式表(Internal style sheet) 内联样式(Inline style) 外部样式 ...

  8. 【译】HTML表单高级样式

    系列文章说明 原文 在本文中,我们将了解如何在HTML表单上使用CSS,为那些难于自定义的表单组件加以样式.如前文所述,文本框和按钮很适合使用CSS,而现在我们得来探索HTML表单样式的那些坑了. 在 ...

  9. BootStrap的table表格，栅格系统，form表单的样式

    BootStrap BootStrap的简介 1.    什么是Bootstrap 由两个前端设计师开发的一个前端的框架(Html,css,js) 简化了程序员写css的代码 2.    为什么使用B ...

随机推荐

  1. 记校赛水题----AK爷兼职计

    Description AK爷最近收到一份兼职,是去幼儿园看小朋友,AK爷认为看孩子这件事情很简单,但是事实并非如此.幼儿园里的孩子们喜欢数学,不仅九九乘法口诀倒背如流而且精通各种算法.某天,AK爷上 ...

  2. 一个例子搞清楚Java程序执行顺序

    当我们new一个GirlFriend时,我们都做了什么? 一个例子搞懂Java程序运行顺序 public class Girl { Person person = new Person("G ...

  3. 实验吧web-易-what a fuck!这是什么鬼东西?

    打开链接是一大串符号,是js编码的一种,全部复制下来,粘贴在控制台中回车就拿到flag了.

  4. 干货 | 快速实现数据导入及简单DCS的实现

    干货 | 快速实现数据导入及简单DCS的实现 原创: 赵琦 京东云开发者社区  4月18日 对于多数用户而言,在利用云计算的大数据服务时首先要面临的一个问题就是如何将已有存量数据快捷的导入到大数据仓库 ...

  5. rust 使用国内镜像，快速安装方法

    前言 众所周知的,国内由于防火墙的原因,访问国外的网络比较慢. 如果直接按照rust官网的安装方式安装非常容易失败,即使不失败也非常非常慢 如果用国内的镜像则可以分分钟就搞定 官方安装方法 文档: h ...

  6. Maven--部署构件至 Nexus

    日常开发生成的快照版本构件可以直接部署到 Nexus 中策略为 Snapshot 的宿主仓库中,项目正式发布的构件则应该部署到 Nexus 中策略为 Release 的宿主仓库中. <proje ...

  7. 2. 现代 javascript 新语法 及 对象专题

    let , const 和 var javascript 里面的作用域 一个大括号 是一个作用域 {  } var 会 在局部作用定义 被定义时 会提升作用域  如 if 的 {} 就属于 局部作用域 ...

  8. vimdiff换行

    两个比较文件同时换行,用:windo set wrap, 或者如下 vimdiff +"windo set wrap" chap/abstract.tex abstract.tex ...

  9. tomcat启动极慢在linux生产环境

    在window环境下不会出现启动极慢的问题.   Tomcat启动极慢在生产环境,跟Weblogic一样   此外由于Weblogic创建域的时候使用的JDK是自带的jrockit,所以要解决WebL ...

  10. Java基础二（2020.1.14）

    学习内容: 1.Java运算符:赋值运算符,算术运算符,关系运算符,逻辑运算符,条件运算符 2.java流程控制:顺序,选择 1.java输入 Scanner s = new Scanner(Syst ...