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 ...
随机推荐
- 33、mybatis(二)
第十六章回顾SQL99中的连接查询 1)内连接 2)外连接 3)自连接 第十七章回顾hibernate多表开发 1)一对一 2)一对多 3)多对多 第十八章 mybatis一对一映射[学生与身份证] ...
- iOS 编码规范
Coding Guidelines for Cocoa https://developer.apple.com/library/prerelease/content/documentation/Coc ...
- python2 到 python3 转换工具 2to3
windows系统下的使用方法: (1)将python安装包下的Tools/Scripts下面的2to3.py拷贝到需要转换文件目录中. (2)dos切换到需要转换的文件目录下,运行命令2to3.py ...
- Cheatsheet: 2015 12.01 ~ 12.31
Mobile Setting Up the Development Environment iOS From Scratch With Swift: How to Test an iOS Applic ...
- 赤红血OL
包含海量的PSD文档!!全PSD源文档-446M.你值得拥有! <ignore_js_op> <ignore_js_op> <ignore_js_op> <i ...
- hdu 4358 Boring counting dfs序+莫队+离散化
Boring counting Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 98304/98304 K (Java/Others) ...
- jQuery实现两个按钮的位置互换
页面上有2个按钮A和B.点击按钮A和按钮B互换位置 ,点击按钮B和按钮A互换位置.应该如何实现? html代码如下: <body> <!--页面上有2个按钮A和B. 点击按钮A和按钮 ...
- C语言语法之关键字
注:该内容整理自以下链接. http://www.cnblogs.com/yezhenhan/archive/2011/10/16/2214420.html 由ANSI标准定义的C语言关键字共32个: ...
- Makefile-入门与进阶【转】
from:here 一.入门 什么是makefile?或许很多Winodws的程序员都不知道这个东西,因为那些Windows的IDE都为你做了这个工作,但我觉得要作一个好的和professional的 ...
- Java远程调试代码不一致问题汇总
欢迎和大家交流技术相关问题: 邮箱: jiangxinnju@163.com 博客园地址: http://www.cnblogs.com/jiangxinnju GitHub地址: https://g ...