CSS基础篇之了解CSS和它的基本属性
CSS是什么？
CSS英文全名是Cascading Style Sheets翻译过来就是层叠样式表，它主是把网页表现与内容分离的一种样式设计语言。这种语言能优化我们编程，把东西简化和优化写法，而且不同的浏览器有不同的CSS前缀
如果你用的是charome和safari，前缀就是-webkit
如果你用的是firefox，前缀是-moz
如果你用的是IE，前缀是-ms
如果你用的是opera，前缀是-o
CSS能做什么？
CSS简化了以前要使用很多图片和脚本实现的效果，只需几行代码就能搞定。方便了程序员的设计过程，更灵活的页面布局和更快的页面加载速度。可以用一个CSS文件控制多个页面属性，只要修改CSS文件中相应的代码，那么页面的效果也会发生改变。设备上也多方面支持手机、打印机、电视机、游戏机等..总的一个目的来说就是为了实现html标签和属性、属性值分开，把HTML属性、属性值用CSS语言来编程使其更简单方便。
CSS语法构成
Selector { Property : Value; }
↓ ↓ ↓
选择符 属性 值
选择符就相当于我们HTML的标签。属性和值都差不多，只不过属性与属性值之间用：号隔开结束用；号。
CSS的引入方式
有三种引入方式
1.行内引用在：在标签内进行CSS样式编码，这种方法是不需要写选择器。CSS语言属性style。
<body style=”background-color:#ccccc;”>
<p style=”font-size:16px;background-color:#ccc;”></p>
2.页内引用：页内引用作为页面中的一个单独部分，由<style></style>标签定位在<head></head>之中。
例1：
<html>
<head>
<title></title>
<style type=”text/css”>
body{
background-color:#ff0000;
}
</style>
</head>
<body>
<p>变红</p>
</body>
</html>
例2：
<html>
<head>
<title></title>
<style type=”text/css”>
h1{
background-color:#ff0000;
font-size:30px;
font-family;“微软雅黑；
}
</style>
</head>
<body>
h1{标题}*100
</body>
</html>
3.外部样式表：外部样式表是CSS应用中最好的一种形式，它将CSS样式代码单独 放在一个外部文件中，再由网页进行调用。需要在同一个目录下创建一个xxx.css文件名。在里面编辑。
例1：
CSS文件里面写
h1{
background-color:#ff0000;
font-size:30px;
font-family;“微软雅黑；
}
在html文件里面写
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="文件名.css" />
</head>
<body>
h1{标题}*100
</body>
</html>
例2：
CSS文件里面写
body{
background-color:#ff0000;
}
HTML里面写
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="文件名.css" />
</head>
<body>
<p>变红</p>
</body>
</html>
上面三中引入方式有分先后级别，三种引用方式里标签越近就优先使用该属性。简称就近原则。行内引用> 页内引用> 页外引用 。不推荐行内引用，最好用页外引用。
如果我同时在CSS文件里编辑也在HTML编辑看效果使用哪个
在HTML里面写
<html>
<head>
<title></title>
<style type=”text/css”>
p{
background-color:red;
}
</style>
</head>
<body>
<p style=“background-color:green;”>变红</p>
</body>
</html>
在CSS里面写
p{
background-color:blue;
}
P标签里面有编辑了背景颜色绿色会变成绿色。因为就近原则，把P标签里面的style=“background-color:green;”删除，重新刷新网页你会发现这次背景变回红色了。
把
<style type=”text/css”>
p{
ackground-color:red;
}
</style>
删除这段，这次是页外引用这次背景变成蓝色了。一定要记住它们的优先级别。
css 代码注释
/* 开始 */ 结束
/* 公共样式*/
body { margin:0px; padding:0px;}
/*导航样式开始*/
#nav {
……
}
/*导航样式结束*/
1.通配选择符 *
把页面内的所有对象进行选择来指定样式。
<style type="text/css">
* { color: #000;
}
</style>
<style type="text/css">
* {
font-family: "微软雅黑";
color: #000;
}
</style>
这里设置全部可用此属性的标签的字体样式和颜色。
2.元素选择符
指定单个标签进行指定样式，相同的标签都会受到影响
<style type=”text/css”>
h1{
background-color:#ff0000;
font-size:30px;
font-family;“微软雅黑；
}
</style>
<style type=”text/css”>
p{
background-color:#ff0000;
font-size:30px;
font-family;“微软雅黑；
}
</style>
这里就是设置了p和h1标签里面的背景颜色、字体大小、字体样式。
3.群组选择符
将所要设计相同属性的标签一起进行改变。
<style type="text/css">
h1,p {
font-family: "微软雅黑";
font-size: 30px;
color: #333;
}
</style>
<style type="text/css">
h1，p，b，big {
font-family: "微软雅黑";
font-size: 30px;
color: #333;
}
</style>
可以对指定的标签同时编辑这三种属性记住标签与标签之间间隔用 ,号。
现在开始学CSS基础希望能学好吧。大家也要加油！
CSS基础篇之了解CSS和它的基本属性的更多相关文章
- 前端面试题——html与css基础篇
整理一波html和css的面试题,侧重基础,希望明天面试能用到~(╥╯^╰╥) 一.HTML部分 1.浏览器页面有哪三层构成,分别是什么,作用是什么? 构成:结构层.表示层.行为层分别是:HTML.C ...
- CSS 基础篇、绝对有你想要
本章内容: 简介 CSS 定义 四种引入方式 样式应用的顺序 选择器(Selector) * 通用元素选择器 标签选择器 class 类选择器 # ID选择器 , 多元素选择器 后代元素选择器 > ...
- html/css基础篇——link和@inport详解以及脚本执行顺序探讨
先说一说两者之间的异同 两者都可以引用外部CSS的方式,现在主流浏览器两者都支持(ps:@import是CSS2.1提出的),但是存在一定的区别: 1.link是XHTML标签,除了加载CSS外,还可 ...
- 前端之CSS基础篇
CSS介绍 什么是CSS? CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS ...
- html/css基础篇——iframe和frame的区别【转】
转自共享圈的使用iframe的优缺点,为什么少用iframe以及iframe和frame的区别.其中本人不认同的地方有做小修改 注:HTML5不再支持使用frame,iframe只有src 属性 一. ...
- html/css基础篇——DOM中关于脱离文档流的几种情况分析
所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版中拿走. ...
- html+css基础篇
2016年11月19号,计划把基础在看一下,听大神说好的东西就要多看几遍,知识是学来用的解决问题的,加油 接下来的是我在自学中的小笔记吧,每天都在保持几个小时的学习思考状态,由于要升本所以学前端的时间 ...
- CSS基础篇之背景、过渡动画
background-origin(背景原点) 设置元素背景图片的原始起始位置.必须保证背景是background-repeat为no-repeat属性才能生效. background-origin: ...
- CSS基础篇之选择符3
border(边框) 如何用CSS调出边框 我们给p标签加一个边框试一下 p{ border:1px solid #ccc:/*这是缩写*/ } 第一个值是为边框的宽度 第二个值是为边框线样式为直线 ...
随机推荐
- 3ds max 渲染清晰面片的边缘
3ds max的菜单栏 -> 渲染 -> 材质编辑器->精简材质编辑器,将面状打勾,如下图,就能渲染出面片清晰的图形.
- SQL Server数据阻塞原因
阻塞形成原因 是由于SQL Server是高并发的,同一时间会有很多用户访问,为了保证数据一致性和数据安全,引入了锁的机制.同一时间只有拿到钥匙的用户能够访问,而其他用户需要等待. 死锁形成四大必要条 ...
- 配置ntp服务
配置ntp服务(hadoop搭建可参考) 一:修改选定的服务器的本地时间 date -s '2016-10-07 16:29:30' +'%F %T' //需要设置的时间 二:修改后将时间写入到硬件时 ...
- Guava学习笔记（一）概览
Guava是谷歌开源的一套Java开发类库,以简洁的编程风格著称,提供了很多实用的工具类, 在之前的工作中应用过Collections API和Guava提供的Cache,不过对Guava没有一个系统 ...
- CSS清除浮动技巧
一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 本来两个黑色对象盒子是在红色盒子内,因为对两个黑色盒子使用了f ...
- Datazen地图Chart介绍
本篇主要介绍Datazen对于地图图表的支持,这里你可以看到Datazen目前所支持的地图图表类型,以及其自带的地图数据. Datazen下地图图表跟其它Dashboard的类型是一样的. 创建一个新 ...
- 再见，OI
你好,NOIP 2015年9月1日 正式成为了福建省莆田一中的一名高一成员 后来学校搞了选修 大家都很激动 因为自己的兴趣和特长能够得到发挥了(或者说能逃课或者看好多电影) 发现选修提供的选项中有好几 ...
- 基于dubbo的分布式项目实例应用
本文主要学习dubbo服务的启动检查.集群容错.服务均衡.线程模型.直连提供者.只定阅.只注册等知识点,希望通过实例演示进一步理解和掌握这些知识点. 启动检查 Dubbo缺省会在启动消费者时检查依赖的 ...
- 使用极光推送(www.jpush.cn)向安卓手机推送消息【服务端向客户端主送推送】C#语言
在VisualStudio2010中新建网站JPushAndroid.添加引用json帮助类库Newtonsoft.Json.dll. 在web.config增加appkey和mastersecret ...
- UBUNTU 16.04 编译 OPENJDK8
参考了几篇文章,和错误查询,最后总结如下 一.下载 我比较倾向于使用mercurial来获取源代码,虽然你得挑网络稳定的时候更新,但是易更新. 从官网查找一下,可以通过以下步骤完成源代码的下载 1. ...