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. markdown使用介绍

    一.标题,前面加#,加一个 一级标题,两个二级标题,以此类推. 一级标题 二级标题 三级标题

  2. FTP服务器 vsftp samba服务器 共享 smb

    FTP服务器 vsftp samba服务器 共享 smb 马哥视频 参考1 参考3 参考2 参考4 vsftp服务器实现匿名用户上传.修改权限和一些设置 win7访问 地址栏输入   ftp://账号 ...

  3. pipeline简单规则

    Declarative 1. pipeline{ agent options{ } stages{ stage(' '){ steps{ } } } post{ always{} changed{} ...

  4. maven中的groupId和artifactId 区分

    原文地址:https://blog.csdn.net/snowin1994/article/details/53024871/ maven中的groupId和artifactId 区分 groupid ...

  5. mybatis-地区三表生成地区树

    package com.dhht.manager.vo.area; import lombok.Data; import java.io.Serializable;import java.util.L ...

  6. 基于表单的web暴力破解

    暴力破解 概述 连续性尝试+字典+自动化 如果一个网站没有对登录接口实施防暴力破解的措施,或者实施了不合理的措施,则该网站存在暴力破解漏洞. 是否要求用户设置了复杂的密码 是否每次认证都是用安全的验证 ...

  7. App的布局管理

    今天学习了布局管理器,格局自己的学习内容和课程,我主要学习了两种管理布局方式 一:LinearLayout线性布局 线性布局是指布局里面的内容成线性排列,有两种排列方式,横向排列和纵向排列,而排列方式 ...

  8. Java 面向对象 异常处理：RunTimeexception，try-catch，异常声明throws，自定义异常，throw和throws的区别，多异常处理（9）

    Java 面向对象 异常处理:RunTimeexception,try-catch,异常声明throws,自定义异常,throw和throws的区别,多异常处理(9)

  9. 2019牛客暑期多校训练营（第七场）A.String【最小表示法】

    传送门:https://ac.nowcoder.com/acm/contest/887/A 题意:大意就是给你一个只含有0和1的字符串,找出一种分割方法,使得每个分割出的字符串都是在该字符串自循环节中 ...

  10. 后端Springboot前端VUE实现Excel导入功能

    功能描述:做的是物联网的项目,Excel导入实现的功能是将Excel中的数据批量的导入AEP系统,再导入我们系统中.目前已经完成该功能,前端还会添加进度条优化.对于导入导出功能,推荐这个Git:htt ...