CSS样式表------第一章：样式表的基本概念
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样式表------第一章：样式表的基本概念的更多相关文章
- SQL Server(第一章) 创建表 删除表 创建主键约束、唯一约束、外键约束、CHECK约束、默认约束
1.Employees员工表 /** 创建Employees员工表 **/ USE TSQL2012 IF OBJECT_ID('dbo.Employees','U') IS NOT NULL DRO ...
- 关于CSS学习的第一章
1.CSS三种书写的方式:嵌入式.外链式.行内式 嵌入式就是将CSS写入在<style></style> 外链式将外面的CSS文件通过HTML中的标记链接过来:<link ...
- 第一章：Lambda表达式入门概念
要点:将行为像数据一样传递. 一.几种形式 1.没有参数,用()表示 () ->System.out.println("Hello World"); 2.有且仅有一个参数,省 ...
- CSS中的各个选择节点，都有样式最后一个无样式的快捷解决方法
2.1.3 多标签 多标签选择器一般和html上下文有关,它有以下集中分类 选择一个祖先的所有子孙节点,例如 div p{…} 选择一个父元素的所有直属节点,例如 div > p{…} 选择某一 ...
- from表单、css选择器、css组合器、字体样式、背景属性、边框设置、display设置
目录 一.form表单 1.form表单功能 2.表单使用原理 二.前端基础之css 1.关于css的介绍 2.css语法 3.三种编写CSS的方式 3.1.style内部直接编写css代码 3.2. ...
- CSS 小结笔记之三种样式表
CSS 引入共有三种方式:内部样式表,内联样式(行内样式)表,外部样式表,当然也可以使用多重样式 内联样式 <div style="color:red;font-size:20px&q ...
- CSS学习（3）样式表
如何插入样式表 插入样式表的方法有三种: 外部样式表(External style sheet) 内部样式表(Internal style sheet) 内联样式(Inline style) 外部样式 ...
- 【译】HTML表单高级样式
系列文章说明 原文 在本文中,我们将了解如何在HTML表单上使用CSS,为那些难于自定义的表单组件加以样式.如前文所述,文本框和按钮很适合使用CSS,而现在我们得来探索HTML表单样式的那些坑了. 在 ...
- BootStrap的table表格，栅格系统，form表单的样式
BootStrap BootStrap的简介 1. 什么是Bootstrap 由两个前端设计师开发的一个前端的框架(Html,css,js) 简化了程序员写css的代码 2. 为什么使用B ...
随机推荐
- Ansible常见错误解析
背景 由于工作中经常用到ansible,所以整理了常用的ansible错误及原因分析,方便自己也方便别人参考. 1.shell 模块常见错误 1.1 使用shell遇到"msg": ...
- 学习Github必须要会的知识
目的 托管项目代码 基本概念 仓库Respository 存放项目代码,每个项目对应一个仓库,多个开源项目则有多个仓库. 收藏Star 收藏项目,方便下次查看. 复制克隆项目Fork ...
- pyecharts绘制地图可视化
pyecharts:官方文档 我们这里使用pyecharts模块进行绘图. pyecharts 项目包含了一系列的地理地图数据,这些数据或者已经内置,或者需要额外安装和加载,我们需要下载下面六个包. ...
- JavaScript 之 web API
1.获取元素 document.getElementById('标签的id值'); document.getElementsByTagName('标签名'); document.getElements ...
- Linux无法连接网络解决方案
上次在VM中装好Linux以后,用xshell可以连接上Linux,可是今天在启动虚拟机打开Linux以后,发现又没有网络连接了,因为要用xshell连接的话首先要知道Linux的ipv4地址,在li ...
- win10使用笔记本自带显卡GUP安装CUDA，版本问题
1.GPU算力问题 查询:win+r, GPU:GeForce GTX 850m,算力5.0,还可以跑得起来深度项目 2.我们需要查看NVIDIA驱动版本,才能安装合适的CUDA版本. 在C:\Pro ...
- iPhone到底能不能充一整夜电？
其实在国内,手机充电一直是个"玄学问题".早在多年前就有大神向小白敦敦教导,"新买的手机要将电用完,并充12个小时,如此反复三次才能延长手机电池寿命".甚至直到 ...
- Aras Innovator时间验证
//方法名:bcs_Nexteer_CheckTime //功能描述:开始和结束日期对比 //原作者:joe //创建时间:20141226 //版权所有(C)JOE.FAN //debugger; ...
- 201509-2 日期计算 Java
思路: 每月有多少天是固定的,放到数组中,2月单独判断一下. import java.util.Scanner; public class Main { public static void main ...
- 15）png图片旋转贴图
1)基本代码展示 还是上一个那个总代码: #include<Windows.h> #include<gdiplus.h>//GDI+的头文件 using namespace ...