随便写写,当作了解--Css
Css,Cascading Style Sheets,层叠样式表。用于控制HTML页面样式。他的基本格式由两部分组成:
选择器 声明块
一、使用
css的注释用 /* 注释内容 */
1.导入外部样式表
<link rel=”stylesheet”type=”text/css”href=”myCss.css”media=”all”/>
rel:表示关系,这里的关系是“stylesheet”;如果将rel定义为“alternate stylesheet”,他就为候选样式表,利用title属性生成候选样式列表;
type:描述link加载的数据类型;
href:样式表的位子;
media:这个样式要运用的媒体,all表示所有。
2.在页面的样式表
<style type=”text/css”> /*样式表内容*/ </style> 。可以使用media属性。
3.在页面的样式表中导入外部样式表
<style type=”text/css”>
@import url(mycss.css) media;
/* 样式表内容 */
</style>
media作用和前面的link一样,可有可无。
4.内嵌的样式
直接使用元素的style属性,指定p标签内的颜色为红色
<p style = “color:red”>xxxx</p>
二、选择器
1 分组
h1 , h2 , p { color : red; } 逗号表示分组,这句表示h1,h2,p标签的字体颜色为红色。如果不要逗号,意义完全不一样。
* { color : grey ; font-size: 80px ;} * 是通配选择器,表示所有的标签元素 字体为灰色,大小为80像素。
2 类选择器 要区分大小写
.warning { font-weight : bold ; } 表示class值为“warning”的标签,字体全部加粗。前面有英文的句号。类选择起可以连起用 如 p.warning.help ,他匹配的是class属性包含warning 和 help的p元素。中间没有空格。
3 id选择器 要区分大小写
#warning { font-weight : bold ; } 表示Id值为“warning”的标签,字体全部加粗。前面有井号。
p#warning 表示id为warning的p元素
用id选择器还是类选择器?
类名可以重复用,而html中标签的id是唯一的。这意味着id选择器在一个html文档中,最多只会使用一次。
4 属性选择器 [ ]
4.1根据属性选择
h1[class] { color: silver } 表示 带有class 标签的h1元素都被选择,设置字体颜色为灰色。
* [id] 表示选择所有的带有id属性的元素。其他属性选择同理。
4.2根据属性值选择
a[ href =”http://www.baidu.com”] 表示选择所有超链接等于百度的a标签。
p[ calss=”warning”] 表示选择所有class等于warning的p标签。
4.3根据部分属性值选择
p[ class~=”warning”]表示包含warning这个词的class属性,注意不是包含这个字符串,而是包含词,使用空格分开的词!他根据属性中,一个用空格分隔的词来完成选择。他等价与 p.class
p[ class ^=”warning”] 表示calss属性以字符串warning开头的p标签。
p[ class $=”warning”] 表示calss属性以字符串warning结尾的p标签。
p[ class *=”warning”] 表示calss属性包含字符串warning的p标签。
4.4后代选择器
#d1 h1{ color : red }表示id为d1元素的所有后代h1字体颜色为red。
#d1 > h1{ color : red }表示id为d1元素的所有直接子元素h1字体颜色为red。
#d2 + div{ color : red }表示id为d2元素的紧接着的一个兄弟节点div的字体为红色。
4.5伪类选择器
4.5.1链接伪类
a:link 表示未访问的超链接
a:visited 表示已访问的超链接
4.5.2动态伪类
input : focus 表示当前有输入焦点的input元素。
p:hover 表示当前鼠标停留的元素。
button : active 表示被用户输入激活的元素。
注:在a标签上设置伪类样式时,推荐是“LOVE-HA” ;link ,visited , hover , active
4.5.3静态伪类
h1:first-child 选择 作用第一个子元素的 h1 。eg:
<body>
<h2></h2>
<h1>d1外的h1</h1>
<div id="d1">
<h1>d1内的h1</h1>
<div id="d2">
<h1>d2内的h1</h1>
</div>
<h1>d1内的h1</h1>
</div>
</body>
这个就只有中间两个被选中,因为第二个h1是d1的第一个子元素,第三个h1是d2的第一个子元素。
* : lang(fr) 选择所有法语。这个是对语言进行选择
4.6伪元素选择器
p:first-letter 选择块级元素的首字母 。常用的块级元素 p div h 。。。。
p:first-line 选择块级元素的第一行文本
注:first-letter 和 first-line 对属性的使用是有限制的,不是所有属性都有效!
h1:before {contetn: “myContetn”;}
在标签h1前添加一个myContent,后面可以设置样式。
h1:after{contetn: “myContetn”;}
在标签h1后添加一个myContent,后面可以设置样式。
三、样式表的特殊性
如果多个选择器都选中了同一个样式,那么首先根据他们的重要性判断,及
!important
#d1 h1{ color : red !important ; } 若一个属性后加入了!important ,所有选择的元素都以这个属性为主。
然后根据特殊性判断,选择器的特殊性值表示为4个部分:0,0,0,0
若存在Id选择器,就加上 0,1,0,0
若存在类选择器,或属性选择器,或伪类选择器,就加上 0,0,1,0
若存在元素,或伪元素,就加上 0,0,0,1
若是内嵌的样式,及标签里有style属性, 就加上 1,0,0,0.
eg:
div 特殊性为0,0,0,1; div#id 为 0,1,0,1; div p.class #name 为 0,1,1,2.
把逗号去掉是一个四位数,如果属性冲突,谁大就以谁为准。注意,这里可以把 !important 理解为无限大。
如果他们的重要性和特殊性一样,那么以后面的为主。
四、关于定位和浮动
position的四个属性。
1、static:默认值。没有定位,元素出现在正常的流中。
2、relative:生成相对定位的元素,通过top,bottom,left,right的设置相对于其正常位置进行定位。他是相当于原本位置的偏移位置,可能会覆盖其他元素。他原本的位置会保留。
3、absolute:生成绝对定位的元素,相对于 static
定位以外的第一个父元素进行定位。这种定位的元素不再正常流当中,完全被独立了的。可能会覆盖其他元素。元素的位置通过 "left", "top", "right"
以及 "bottom" 属性进行规定。
4、fixed:生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom"
属性进行规定。
他们的上下关系用z-index确定。
浮动,float:left | right | none
他会从正常流中删除,但是还是会影响布局。
随便写写,当作了解--Css的更多相关文章
- 没有什么,开发ASP.NET时随便写写,想到什么写什么
没有什么,开发ASP.NET时随便写写,想到什么写什么,这次想写点开发过程中,比如在数据库,某一张表中有一个字段,如下: 上面代码示例中高亮字段,数据类型为BIT,它存储的值将为"True& ...
- 【随便写写】印象笔记,WordPress,CSDN 等 写博客的不同
之前有的文章,写在了印象笔记里面,有的文章,写在了自己的WordPress博客里面,但是,感觉还是需要在主流平台分享一下文章的.就再次写写文章吧.(PS:公众号最重要的不是写作,而是排版) 说说几个这 ...
- <随便写写>
# Markdown用法 整理
- python3第一天,随便写写
哈哈 我滴第一篇博客,不知道咋写,随意看了看别人的博客,我还是不知道咋写,既然是我的博客,那我就把它当随笔写了(这里就是添加随笔...) 也不知道自己说了啥,不过想到了一句话:日记都是写给别人看的.哈 ...
- 随便写写,也有一些参考了我jio的很好的他人的成果
Spring框架学习记录(1) 一. https://www.cnblogs.com/yuanqinnan/p/10274934.html (一)只要用框架开发java,一定躲不过spring,Spr ...
- c#随便写写 数据层和表现层,队列执行
base.xxx() 调用父类的方法
- SparkSQL DSL 随便写写
@Testdef functionTest() = { Logger.getLogger("org").setLevel(Level.WARN) val spark = getSp ...
- 《精通CSS:高级Web标准解决方案》学习笔记(上)
鉴于国产CSS书籍基本都是辣鸡的现状,我在半年前动用某工作室的购书资金采购了一些技术书籍,这本广受好评的<精通CSS>也在其中.但是在阅读过后我深深的感觉到,如果说CSS本来已经是一种很琐 ...
- 【自编教材】16万8千字的HTML+CSS基础 适合从0到1-可收藏
[图片链接有点小问题,这几天更新,敬请期待!] 目 录 第一章HTML基础 1.1 HTML简介和发展史 1.1.1 什么是HTML 1.1.2 HTML的发展历程 1.1.3 web标准 1.2 开 ...
随机推荐
- NGINX(五)模块
nginx模块分为以下几类: NGX_CORE_MODULE //核心模块 NGX_HTTP_MODULE //HTTP处理模块 NGX_EVENT_MODULE //事件处理模块 NGX_MAIL_ ...
- 一个简单的MDI示范程序(Delphi)
http://www.cnblogs.com/pchmonster/archive/2012/01/07/2316012.html 最为一个巩固之前有关窗体和对象的有关知识,下面就建立一个简单的MDI ...
- mac 修改xcode的版本
http://blog.csdn.net/yangzhenping/article/details/50266245
- 介绍并扩展Fitnesse的测试模块化机制:ScenarioTable
摘要:在验收测试框架Fitneese中,使用Scenario可以把最常用的测试步骤封装起来,从而达到模块化定义Fitnesse测试用例的能力.但Scenario仅限于封装Script测试步骤,Scri ...
- CSS换行:word-wrap、word-break和text-wrap区别
一.word-wrap:允许对长的不可分割的单词进行分割并换行到下一行.(中英文处理效果一样) word-wrap有两个取值: 1.word-wrap: normal:只在允许的断字点换行(浏览器保持 ...
- htmlcss笔记--a
a标签 1.下载:href里面放一个文件或者压缩包时,会下载: 2.锚点:跳转到锚点: href="#id" 跳转到的模块添加一个id,点击id就会跳转到该模块. html标签: ...
- uva 2572 Viva Confetti
思路: 小圆面是由小圆弧围成.那么找出每条小圆弧,如果小圆弧,在小圆弧中点上下左右进行微小位移的所得的点一定在一个小圆面内. 找到最后覆盖这个小点的圆一定是可见的. 圆上的点按照相邻依次排序的关键量为 ...
- uva11732 strcmp() Anyone?
题意:给出多个字符串,两两配对,求总配对次数. 思路:如果两个字符串一样,ans=strlen(字符串)*2+2,如果不同,ans=公共前缀长度*2+1:用左儿子右兄弟建字典树.插入一个字符计算一次. ...
- 5.2 CUDA Histogram直方图
什么是Histogramming Histogramming是一种从大的数据集中提取典型特征和模式的方式. 在统计学中,直方图(英语:Histogram)是一种对数据分布情况的图形表示,是一种二维统计 ...
- RDMA编程实例
1,RDMA verbs Multicast Code for Multicast Using RDMA_CM(Remote directory memory access_connect manag ...