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 ...
随机推荐
- python :HTML+CSS (Position)
position_fixed固定在某一个页面上 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- 【转】SVN库的迁移
转载地址:http://blog.csdn.net/windone0109/article/details/2841294 SVN服务器由于硬盘空间不足,需要将其迁移到另外一台机器上,并且更换Repo ...
- [问题2014A04] 解答
[问题2014A04] 解答 (1) 由条件可得 \(AB+BA=0\), 即 \(AB=-BA\), 因此 \[AB=A^2B=A(AB)=A(-BA)=-(AB)A=-(-BA)A=BA^2=B ...
- [问题2014S03] 解答
[问题2014S03] 解答 设 \(A\) 的 \(n\) 个特征值分别为 \(\lambda_1,\lambda_2,\cdots,\lambda_n\), 由条件知它们都是不等于零的实数. 根 ...
- 8 个必备的PHP功能开发
做过PHP开发的程序员应该清楚,PHP中有很多内置的功能,掌握了它们,可以帮助你在做PHP开发时更加得心应手,本文将分享8个开发必备的PHP功能,个个都非常实用,希望各位PHP开发者能够掌握. ...
- SpringMVC控制器与视图的数据交换
1,先创建spring的主配置文件(applicationContaxt.xml如果写在WEB-INF下,就不用配置context了,就是不用告诉它路径了,WEB-INF会自动加载的),由监听器负责加 ...
- jquery总结05-常用事件02-表单事件
表单事件 .focus()元素获得焦点时 阻止冒泡 子元素不可以 .blur() 元素失去焦点时 阻止冒泡 子元素不可以 .change() input.select.textarea值发生改变时 i ...
- lua table remove元素的问题
当我在工作中使用lua进行开发时,发现在lua中有4种方式遍历一个table,当然,从本质上来说其实都一样,只是形式不同,这四种方式分别是: for key, value in pairs(tbtes ...
- HDU-4529 郑厂长系列故事——N骑士问题 状态压缩DP
题意:给定一个合法的八皇后棋盘,现在给定1-10个骑士,问这些骑士不能够相互攻击的拜访方式有多少种. 分析:一开始想着搜索写,发现该题和八皇后不同,八皇后每一行只能够摆放一个棋子,因此搜索收敛的很快, ...
- python成长之路【第六篇】:python模块--time和datetime
1.时间表现形式 时间戳 (1970年1月1日之后的秒,即:time.time())格式化的时间字符串 (2014-11-11 11:11, 即:time.strftime('%Y-%m- ...