CSS（简介or选择器）
我们为什么需要CSS?
使用css的目的就是让网页具有美观一致的页面，另外一个最重要的原因是内容与格式分离 在没有CSS之前，我们想要修改HTML元素的样式需要为每个HTML元素单独定义样式属性，当HTML内容非常多时，就会定义很多重复的样式属性，并且修改的时候需要逐个修改，费心费力。是时候做出改变了，所以CSS就出现了。
CSS的出现解决了下面两个问题：
- 将HTML页面的内容与样式分离。
- 提高web开发的工作效率。
什么是CSS?
CSS是指层叠样式表(Cascading Style Sheets)，样式定义如何显示HTML元素，样式通常又会存在于样式表中。也就是说把HTML元素的样式都统一收集起来写在一个地方或一个CSS文件里。
css的优势
1.内容与表现分离 2.网页的表现统一，容易修改 3.丰富的样式，使页面布局更加灵活 4.减少网页的代码量，增加网页浏览器速度，节省网络带宽 5.运用独立页面的css,有利于网页被搜索引擎收录
如何使用CSS？
我们通常会把样式规则的内容都保存在CSS文件中，此时该CSS文件被称为外部样式表，然后在HTML文件中通过link标签引用该CSS文件即可。这样浏览器在解析到该link标签的时候就会加载该CSS文件，并按照该文件中的样式规则渲染HTML文件。
CSS语法
CSS基础语法
CSS语法可以分为两部分：
- 选择器
- 声明
声明由属性和值组成，多个声明之间用分号分隔。
网页中引用CSS样式
- 内联样式
- 行内样式表
- 外部样式表
- 链接式
- 导入式
内嵌方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS内嵌式</title> </head>
<style>
p{
color: #ff00c2;
}
</style
>
<body>
<p>我是CSS内嵌式</p> </body>
</html>
行内样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS行内样式</title>
</head>
<body>
<p style="color: red">我是CSS行内样式</p>
</body>
</html>
外联样式表-链接式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外联样式表链接式</title>
</head>
<link rel="stylesheet" href="index.css"
<body>
<p>我是外联样式表链接</p>
</body>
</html>
index.css
p{
color:green;
}
外联样式表-@import url()方式 导入式
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8">
<title>Title</title>
</head>
<style>
@import url(index.css);
</style>
<body>
<p>导入式</p>
</body>
</html>
index.css
p{
color:green;
}
注意：@import url()必须写在文件最开始的位置。
链接式与导入式的区别
1、<link/>标签属于XHTML,@import是属性css2.1
2、使用<link/>链接的css文件先加载到网页当中，再进行编译显示
3、使用@import导入的css文件，客户端显示HTML结构，再把CSS文件加载到网页当中
4、@import是属于CSS2.1特有的，对于不兼容CSS2.1的浏览器来说就是无效的CSS（简介or选择器）的更多相关文章
- CSS 简介、 选择器、组合选择器
#CSS 装饰器引入<!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- 1 CSS简介&语法&选择器及优先级&背景&文本&字体&链接&列表&表格
什么是CSS? Cascading Style Sheets层叠样式表,样式定义如何显示HTML元素 样式通常存储于样式表中,外部样式表通常存储在CSS文件中 多个样式定义可层叠为1,样式对网页中元素 ...
- jQuery的简单用法（jQuery的简介，选择器，属性和css,文档处理）
一.jQuery简介 1.1. JS库 JavaScript 库封装了很多预定义的对象和实用函数.能帮助使用者建立有高难度交互客户端页面, 并且兼容各大浏览器. 1.2. 当前流行的 JavaSc ...
- 【CSS简介、基础选择器、字体属性、文本属性、引入方式】前端小抄(2) - Pink老师自学笔记
[CSS简介.基础选择器.字体属性.文本属性.引入方式]前端小抄(2) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS简介 CSS 的主要使用场景就是布局网页,美化页面 ...
- 2、前端--初见前后端交互、CSS简介、基本选择器、组合选择器、属性选择器、分组与嵌套、伪类选择器
今日内容概要 初窥后端框架 css简介 css选择器 今日内容详细 初次体验前后端交互 # 代码无需掌握 只看效果即可 """后端框架:可以简单的理解为别人写好的一个非常 ...
- CSS简介，基础选择器，字体属性，文本属性
欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树Sankey 前端学习:学习地址:黑马程序 ...
- html5快速入门（二）—— CSS简介
前言: 1.HTML5的发展非常迅速,可以说已经是前端开发人员的标配,在电商类型的APP中更是运用广泛,这个系列的文章是本人自己整理,尽量将开发中不常用到的剔除,将经常使用的拿出来,使需要的朋友能够真 ...
- CSS 简介
CSS 简介 需要具备的基础知识 在继续学习之前,你需要对下面的知识有基本的了解: HTML XHTML CSS 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义 ...
- CSS（一）：CSS简介和基本语法
一.CSS简介 1.什么是CSS CSS:Cascading Style Sheet:即层叠样式表.样式定义了如何显示HTML或XHTML元素.包括对字体.颜色.边距.高度.宽度.背景图片.网页定位等 ...
- CSS伪类选择器
一.CSS伪类选择器用于给某些选择器添加效果语法规则:选择器:伪选择器例:a:link {color: #FF0000} 未访问的链接 a:visited {color: #00FF00} 已访问的链 ...
随机推荐
- rocketmq部署架构
1 技术架构 RocketMQ架构上主要分为四部分,如上图所示: Producer:消息发布的角色,支持分布式集群方式部署.Producer通过MQ的负载均衡模块选择相应的Broker集群队列进行消息 ...
- SLA
服务级别协议[编辑] 维基百科,自由的百科全书 跳到导航跳到搜索 本条目可参照外语维基百科相应条目来扩充. 若您熟悉来源语言和主题,请协助参考外语维基扩充条目.请勿直接提交机械翻译,也不要翻译 ...
- 关于git的一些零碎知识
git文件的三个状态:已修改,已暂存,已提交git的三个区域: 工作区,暂存区,对象库 git的几个指针(以master为例) 远程有个master,本地有个master,本地有个指针是指向远程的ma ...
- LeetCode 面试题16.18.模式匹配
模式匹配 题目: 你有两个字符串,即pattern和value. pattern字符串由字母"a"和"b"组成,用于描述字符串中的模式.例如,字符串" ...
- Solon rpc 之 SocketD 协议
1. 简介 SocketD 是一种二进制的点对点通信协议,是一种新的网络通信第七层协议.旨在用于分布式应用程序中.从这个意义上讲,SocketD可以是RSocket等其他类似协议的替代方案.它的消息协 ...
- Centos7 密钥对登陆（适用于群晖DSM）
www.swack.cn - 原文链接:Centos7 密钥对登陆(适用于群晖DSM) 1.生成证书 此处证书使用swack用户生成 注:不要使用root生成证书,因为我们后面会禁用root登陆 [s ...
- 【剑指 Offer】09.用两个栈实现队列
题目描述 用两个栈实现一个队列.队列的声明如下,请实现它的两个函数 appendTail 和 deleteHead , 分别完成在队列尾部插入整数和在队列头部删除整数的功能.(若队列中没有元素,del ...
- 【Maven】Maven 高级应用
Maven 高级应用 Maven 基础 Maven 是一个项目管理工具,它有如下好处: 节省磁盘空间 可以一键构建 可以跨平台使用 依赖传递和管理,提高开发效率 一键构建:Maven 自身集成了 To ...
- 【C++】《C++ Primer 》第十九章
第十九章 特殊工具与技术 一.控制内存分配 1. 重载new和delete new表达式的工作机理: string *sp = new string("a value"); //分 ...
- Azure Terraform（五）利用Azure DevOps 实现自动化部署基础资源
一,引言 上一篇我们结合学习 Azure Traffic Manger 的内容,做了一个负载均衡的基础设施架构.通过 Terraform 部署执行计划,将整个 Azure Traffic Manage ...