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 ...
随机推荐
- UML-设计模式-对一组相关的对象使用抽象工厂模式
1.场景 问题: javapos驱动,有2套,一套是IBM的,另一套是NCR的.如: 使用IBM硬件时要用IBM的驱动,使用NCR的硬件时要用NCR的驱动.那该如何设计呢? 注意,此处需要创建一组类( ...
- Linux 下 OpenCV3 安装
编译安装OpenCV3 从官网下载:http://opencv.org/releases.html 选择一个较新版本的opencv3.X,下载source源代码 下载之后解压,并cd到该文件夹进行编译 ...
- 从AppleWatch4发布后对手股价大跌看可穿戴市场未来
万众瞩目的苹果秋季发布会终于落下了帷幕,这场发布会既有惊喜,也有遗憾.遗憾的是新款iPad Pro.廉价版Macbook air没有亮相.iPhone系列价格较贵等,惊喜的则是iPhone的处理器依然 ...
- python导出oracle中的表内容,并生成excel文件
export NLS_LANG=AMERICAN_AMERICA.ZHS16GBK; ### 如果oracle表中有中文输出,为防止乱码,执行脚本前,需要先制定字符集: #!/usr/bin/pyth ...
- 在java中如何根据手机号查询号码归属地
1.maven项目中配置 <dependency><groupId>com.googlecode.libphonenumber</groupId><artif ...
- multi-task learning
多任务学习, CTR, CVR 任务同时训练, 同时输出概率.
- 吴裕雄--天生自然 JAVASCRIPT开发学习: 闭包
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Vue 源码学习(1)
概述 我在闲暇时间学习了一下 Vue 的源码,有一些心得,现在把它们分享给大家. 这个分享只是 Vue源码系列 的第一篇,主要讲述了如下内容: 寻找入口文件 在打包的过程中 Vue 发生了什么变化 在 ...
- share团队冲刺5
团队冲刺第五天 昨天:按钮操作,自定义按钮及各种原件样式 今天:设置按钮按下效果,界面布局 问题:无
- dozer
1.简介 dozer是用来两个对象之间属性转换的工具,有了这个工具之后,我们将一个对象的所有属性值转给另一个对象时,就不需要再去写重复的set和get方法了. 2.如果两个类之间的属性有些属性意思一样 ...