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. VScode 修改中文字体

    打开vscode ctrl+,打开设置 找到font,第一个是首选的英文字体,第二个是中文字体.

  2. halcoN GPU

    halcon18.11——DL http://www.ihalcon.com/read-11150.html   楼主# 更多发布于:2018-12-04 19:50     1. 按顺序下载安装 h ...

  3. Tensorflow学习教程------tensorboard网络运行和可视化

    tensorboard可以将训练过程中的一些参数可视化,比如我们最关注的loss值和accuracy值,简单来说就是把这些值的变化记录在日志里,然后将日志里的这些数据可视化. 首先运行训练代码 #co ...

  4. Ajax请求文件下载操作失败的原因和解决办法

    使用Poi做excel表格导出功能,第一个想到的就是用Ajax来发送请求,但是Ajax和后台代码都执行了,就是无法下载文件. 前台代码 function exportExl(){ var form = ...

  5. Linux 基本操作学习

    Linux 学习 虚拟机 (Virtual Machine) 指通过软件模拟的具有完整硬件系统功能的,运行再一个完全隔离环境中的完整计算机系统 常用 Linux 命令 命令 对应英文 作用 ls li ...

  6. Python内置文件

    概述 为了提升效率,Python有些内置文件如 __pycache__.py 详解 1)__pycache__.py, python程序运行时不需要编译成二进制代码,而直接从源码运行程序 Python ...

  7. vscode显示当前文件完整路径信息

    Code->Preferences->Settings 搜索window.title 原本是activeEditorShort,修改 activeEditorShort => act ...

  8. Redis_大保健

    Redis redis命令参考网址: http://doc.redisfans.com/ redis主从: 集群:一组通过网络连接的计算机,共同对外提供服务,像一个独立的服务器. 一.简介 nosql ...

  9. nvm安装教程

    nvm是一个nodejs的版本管理工具 默认安装位置  C:\Users\userName\AppData\Roaming\nvm x   1 C:\Users\userName\AppData\Ro ...

  10. 吴裕雄--天生自然 PYTHON3开发学习：列表

    list1 = ['Google', 'Runoob', 1997, 2000]; list2 = [1, 2, 3, 4, 5 ]; list3 = ["a", "b& ...