CSS第一天总结
CSS是层叠样式表,其作用在我看来就是统一一个或多个元素或者ID、class等的属性,CSS可以定义的属性非常多,一个好看的网页离不开CSS的修饰。
CSS简而言之就是三个部分:选择符、属性、属性值。
每个浏览器的CSS都在遵守标准的同时自主添加了各自的私有标准,为了更好的兼容性需要添加前缀:
-webkit chrome和safari
-moz firefox
-ms IE
-o opera
引入CSS的方法有三种:
1.行内引用
- <a style="text-decoration:none;color:black"
*简单的页面编写或教学时常用
2.页内引用
- <style type="text/css">
- a{
- text-decoration: none;color: black;
- }
- </style>
*页内引用放在头部有利于网页性能上的提高
3.外部引用
- <link rel="stylesheet" type="text/css" href="url">
*具有一定规模的网站都使用外部引用,有利于网站的维护
**3种方式冲突时的优先级:行内引用>页内引用>外部引用(就近原则)
CSS注释格式:/*注释内容*/
-------------------------------------------------------------------------------------------------------------------------------------------------------------
CSS选择符
1.通配选择符
选择所有元素,用于设置页面内所有元素的属性,如页面字体样式,字体颜色等
- *{
- font-family: "微软雅黑";
- color: #bebebe;
- }
2.元素选择符
直接选择指定元素进行属性设置,如对页面所有a元素解除下划线且颜色改为黑色:
- a{
- text-decoration: none;
- color: black;
- }
对页面所有p元素设置字体大小
- p{font-size: 30px;}
3.群组选择符
需要给多个元素同时设置同一属性时使用,各元素之前用逗号分隔,如设置a和p元素字体大小为30像素:
- a,p{font-size: 30px;}
设置h1,h2元素颜色为红色:
- h1,h2{
- color: red;
- }
4.包含选择符
当不想选择页面全部的某个属性而只想选择被另外一个属性包含的部分时使用,可以选择元素包含的某一元素,格式为a b{} ab之间是用空格隔开
例如,div包含着两个p元素,而div外有也一个p元素
- <p>test</p>
- <div>
- <p>test</p>
- <p>test</p>
- </div>
当我们选择div里面的p元素时,将P元素字体设置为红色
- div p{color:red}
预览效果会发现,第一个test为默认的黑色,只有后面两个test字体颜色变为红色
**
使用页内引用时,不要忘记把css代码放入<style></style>里面
使用外部引用时,css文件不需要任何html的标签,只需要选择符、属性和属性值,例 a{color:red}
CSS第一天总结的更多相关文章
- 妙味课堂——HTML+CSS(第一课)
一句话,还记忆不如烂笔头,何况还这么笨,记下笔记,也是记录这一路学习的过程. 妙味课堂第一课并未一味地先讲HTML,而是穿插着CSS讲解,这一点不同于一些其他视频,这一点挺特别的!所以这一课涉及到HT ...
- web开发学习之旅---css第一天
一.css全称 Cascade Style Sheet层叠样式表 二.css引入方式 行内样式:<h2 style="color:#0F0">Hello World&l ...
- [WEB面试题] web前端面试题HTML+CSS第一弹,个人整理部分面试题汇总
以下内容仅供参考,网络整理而来 1.XHTML和HTML是什么有什么不同的区别 HTML是一种基本的WEB网页设计语言 XHTML可扩展超文本标记语言,是一种置标语言,表现方式与超文本标记语言(HTM ...
- html+css第一篇
行间样式表 <div style="--"></div> 内部样式表 <style>----</style> 外部样式表 <l ...
- 2、第2节课html教程客户端控件/css第一课/20150917
1.<form> 标签 提交 <form action="http://www.baidu.com" method="post'> </fo ...
- [Codecademy] HTML&CSS 第一课:HTML Basic
本文出自 http://blog.csdn.net/shuangde800 ------------------------------------------------------------ ...
- [CSS]第一项和最后一项样式
列表项的第一项距离顶部0.2rem,最后一项距离底部0.5rem .item:first-child { padding-top: .2rem; } .item:last-child { paddin ...
- 《HTML与CSS 第一章 认识HTML》读书笔记
一.Web让广播明星黯然失色 要建立Web页面,需要创建用超文本标记语言(HyperText Markup Language,HTML)编写的文件,把它们放在一个Web服务器上 二.Web服务器能做什 ...
- css第一篇:元素选择器
1:多个选择器 h1, h2 {} ——h1或h2标签的所有元素 2:通配选择器 * {} ——所有元素 3:元素选择器 div {} ——所有div元素 4:类选择器 .te ...
随机推荐
- Prince2的七大原则(7)
[Prince2科普]Prince2的七大原则(7) 2016-12-12 光环组织级项目管理 按照惯例我们先来回顾一下,PRINCE2七大原则分别是指:持续的业务验证,经验学习,角色与责任,按阶段管 ...
- python:页面布局 后台管理页面之常用布局
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- SQL SERVER数据库的表中修改字段属性被阻止“Prevent saving changes that require table re-creation”
1.启动SQL SERVER,选择工具—>选项,去掉“ 阻止保存要求重新创建表的更改”前面的勾. 2.选择设计器 3.去掉“阻止保存要求重新创建表的更改”前面的对号,点击OK. 重新启动SQL ...
- Wow! Such Sequence!(线段树4893)
Wow! Such Sequence! Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others ...
- CSS3的chapter3
CSS的常用样式分为几大类: 字体样式(font,color, text-decoration ,text-shadow) 元素样式(width,height,margin,padding,opaci ...
- ubuntu14.04 64bit安装teamviewer
1.下载teamviewer,链接如下: http://downloadus2.teamviewer.com/download/version_10x/teamviewer_10.0.36281_i3 ...
- Logistic回归模型和Python实现
回归分析是研究变量之间定量关系的一种统计学方法,具有广泛的应用. Logistic回归模型 线性回归 先从线性回归模型开始,线性回归是最基本的回归模型,它使用线性函数描述两个变量之间的关系,将连续或离 ...
- [转]MySQL去除重复数据
亲测可行,看这里就行了 http://www.jb51.net/article/39302.htm
- ElasticSearch学习问题记录——Invalid shift value in prefixCoded bytes (is encoded value really an INT?)
最近在做一个电商项目,其中商品搜索中出现一个奇怪的现象,根据某个字段排序的时候会出现商品数量减少的情况.按照一般路要么查不出来,要么正常显示,为什么增加了按照销量排序就会出现查询结果减少的情况. 查了 ...
- 从零搭建mongo分片集群的简洁方法
一.目录 1.mongo路径,config数据路径,shard数据路径