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. 运行xv6

    我们使用Qemu在Ubuntu下运行 1. 安装Qemu sudo apt-get install qemu 执行 qemu-system-i386 ,如果弹出Qemu界面说明安装成功了 2. 编译x ...

  2. h5-transform二维变换

    1.html <div class="translate">1</div> <div class="scale">2< ...

  3. Win10 MySQL5.7中文乱码问题

    https://blog.csdn.net/hh___56789/article/details/87900923 最好把 utf8 都换成utf8mb4 ,以免以后遇到意想不到的错误.utf8有漏洞 ...

  4. 动态改变tableHeaderView的显示隐藏及高度

    改变tableHeaderView的高度: UIView *headerView = _tableView.tableHeaderView; headerView.height = 10; 当设置高度 ...

  5. mysql快速搭建从库

    基于mysqldump快速搭建从库 https://blog.csdn.net/leshami/article/details/44994329 使用xtrbackup克隆从库 https://blo ...

  6. jstl中遍历Map

    在jstl中遍历Map和遍历List与数组一样,都是使用forEach标签. 例子: <%@ page import="java.util.Map" %> <%@ ...

  7. CF round #622 (div2)

    CF Round 622 div2 A.简单模拟 B.数学 题意: 某人A参加一个比赛,共n人参加,有两轮,给定这两轮的名次x,y,总排名记为两轮排名和x+y,此值越小名次越前,并且对于与A同分者而言 ...

  8. h5-渐变的基本描述

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

  9. 收藏基本Java项目开发的书

    一.Java项目开发全程实录 第1章 进销存管理系统(Swing+SQL Server2000实现) 第2章企业内部通信系统(Swing+JavaDB实现) 第3章 企业人事管理系统( Swing+H ...

  10. Java使用Sftp实现对跨服务器上传、下载、打包、写入相关操作

    1.Maven引入jar <dependency> <groupId>com.jcraft</groupId> <artifactId>jsch< ...