3-html-css
来源：互联网 发布：mac php集成环境工具 编辑：程序博客网 时间：2024/06/06 21:43
css
ref: http://www.cnblogs.com/yuanchenqi/articles/5977825.html
css概述
css是Cascading Style Sheets的简称，中为称为层叠样式表，用来控制网页数据的表现，可以使网页的数据与数据分离，主要体现在样式
一、css的4种引入方式
1.1、行内式[不推荐使用]
行内式是在标记的style属性中设定的css样式(即直接写在标签中的)，这种方式没有体现出css的优点，不推荐使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>1-1_行内式</title></head><body> <p style="color: red; background: #e7e7e7;">我爱北京天安门</p> <div style="color: #96c6d7; background: #c6d796; font-size: 28px; font-style: italic; ">天安门前太阳升</div></body></html>1.2、嵌入式【直接使用此种方法即可】
嵌入式是将样式写在<head></head>标签对的<style></style>中，如
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>1-2_嵌入式</title> <style> p{ color: red; background: #e7e7e7; } div{ color: #96c6d7; background: #c6d796; font-size: 28px; font-style: italic; } </style></head><body> <p>我爱北京天安门</p> <div>天安门前太阳升</div></body></html>1.3、链接式
使用链接的将单独的css文件链接到html文件中
# css filep{ color: red; background: #e7e7e7;}div{ color: #96c6d7; background: #c6d796; font-size: 28px; font-style: italic;}# html file<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>1-3_链接式</title> <link type="text/css" rel="stylesheet" href="p_div.css"/></head><body> <p>我爱北京天安门</p> <div>天安门前太阳升</div></body></html>1.4、导入式
将一个独立的css文件引入到html文件中，导入式使用css规则引入外部css文件，也要在head标签中引入
# css filep{ color: red; background: #e7e7e7;}div{ color: #96c6d7; background: #c6d796; font-size: 28px; font-style: italic;}# html file<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>1-4_导入式</title> <style> @import "p_div.css"; </style></head><body> <p>我爱北京天安门</p> <div>天安门前太阳升</div></body></html>注意：
* 导入式会在整个网页装载完后再装载css文件，这样就会导致一个问题，如果网页比较大，则会先显示没有样式的网页，闪烁一下之后，再显示有样式的网页，这是导入式固有的一个缺陷
* 链接式是在装载网页之前就先加载css文件，因此客户端用户看到的网页一开始就是带样式的，这也是链接式的优先
二、css的选择器(selector)
“选择器”指明了{}中的”样式”的作用对象，也就是”样式”作用于网页中的那些元素
2.1、基础选择器
- 通用选择器’*’，即匹配所有的标签
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>2-1_通用选择器</title> <style> *{ color: greenyellow; background: darkgray; font-size: 50px; } </style></head><body> <p>我想要把</p> <div> 所有的字体 <span>都变的非常的大</span> </div></body></html>- 标签选择器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>2-2_标签选择器</title> <style> body{ color: greenyellow; background: darkgray; font-size: 50px; } p{ text-align: center; color: mediumvioletred; font-size: 120px; } div{ background: lightgoldenrodyellow; color: cornflowerblue; font-size: 80px; } span{ background: skyblue; color: black; font-size: 50px; } </style></head><body> <p>我想要把</p> <div> 所有的字体 <span>都变的非常的大</span> </div></body></html>- 根据id和class来选择
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>2-2_id-class_选择器</title> <style> body{ color: greenyellow; background: darkgray; font-size: 50px; } #p_head{ text-align: right; color: mediumvioletred; font-size: 30px; } div{ background: lightgoldenrodyellow; color: cornflowerblue; font-size: 80px; } .c_span{ text-align: right; background: skyblue; color: black; font-size: 50px; } </style></head><body> <p id="p_head">根据id选择使用'#' + 'id_name'</p> <div> 所有的字体 <span class="c_span">根据class选择使用'.' + 'class_name'</span> </div></body></html>- id和class的区别：
- 1、id不可以重复
- 2、class可以重复
2.2、组合选择器
2.2.1、后代选择器
E F 后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔li a { font-weight:bold;
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>2-2_组合选择器-后代选择器</title> <style> body{ background: rebeccapurple; } div{ background: cornflowerblue; } body div p{ text-align: right; color: greenyellow; background: darkgray; font-size: 50px; } </style></head><body> <div> <p>所谓的后代选择器</p> <p>即：先从最外面[左面]找，然后再向里找[右面]</p> <p>大概就是这个意思</p> <p>需要自己体会</p> </div></body></html>2.2.2、多标签选择器
E, F 多标签选择器，匹配E或者F元素，中间使用逗号’,’分隔
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>2-2_组合选择器-多元素选择器</title> <style> div, p{ text-align: right; color: greenyellow; background: darkgray; font-size: 50px; } span{ color: red; text-align: left; font-size: 60px; } </style></head><body> <p class="p_class">2-2_组合选择器-多元素选择器</p> <div> 这里是div标签的内容 </div> <span>这里是span标签的内容</span></body></html>2.2.3、子元素选择器
E > F 子元素选择器，所有E元素的子元素F div > p { color:#f00; }
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>2-2_组合选择器-子选择器.html</title> <style> .cls_2 > p{ color: red; text-align: left; font-size: 60px; } </style></head><body> <p class="p_class">标题</p> <div> <p>我在div外面</p> </div> <div class="cls_2"> <p class="p_class">所谓的子选择器</p> <p>。。。。。</p> <p>反正就是子选择器</p> <div> <p>我在div的div的里面</p> </div> </div></body></html>2.2.4、毗邻元素选择器，匹配所有紧随E元素之后的同级元素F
E + F 毗邻元素选择器 匹配所有紧随E元素之后的同级元素，只有一个会被选择 F div + p { color:#f00; }
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>2-2_组合选择器-毗邻选择器</title> <style> div + p{ text-align: right; color: greenyellow; background: darkgray; font-size: 50px; } </style></head><body> <div> <spa>span area</spa> <div>div span</div> <p class="p_class">2-2_组合选择器-毗邻选择器</p> </div> <div> <p class="p_class">所谓的毗邻选择器</p> <div> <p>即：上第一个标签之后(在这里就是div)的紧跟的同级标签会被选择，只有一个会被选择，并不是所有的</p> </div> <p>只有一个会被选择，并不是所有的噢</p> <p>give you some eyes, and experience by yourself.</p> </div></body></html>2.2.5、注意嵌套规则
- 1、块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。
- 2、有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt
- 3、li内可以包含div
- 4、块级元素与块级元素并列、内联元素与内联元素并列。
2.3、属性选择器
说明： E表示元素，attr表示属性，通常情况下E可以省略，也可以自定义属性
* E[attr] 匹配所有具有attr属性的元素，且不考虑它的值
* E[attr=val] 在上面的基础上有一个值的限定，属性和值一样才匹配
* E[attr^=val] 所有元素的属性attr的值以val开关的
* E[attr$=val] 所有元素的属性attr的值以val结尾的
* E[attr*=val] 所有元素的属性值中只要包含val就可以匹配
* E[attr~=val] 匹配元素的属性值中包含val且val是一个单独以空格分隔的
说明一点，属性的值可以包含空格，如’name=”a b c”’, 那么在选择的时候，[name=’b’]，也是被选择的
代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>2-3_属性选择器</title> <style> [id]{ color: #256c7e; } /* [attr] */ [class='c_div_2']{ background: #715498; } /* E[attr=val] */ div[custom='vincent']{ color: red; } /* 自定义标签属性选择 */ [class^='cls_']{ background: #c6d796; } /* E[attr^=val] */ [class$='ty']{ background: pink; } /* E[attr$=val] */ [class*='div']{ font-style: italic; } /* E[attr*=val] */ [class~='dog']{ font-size: 18px; } /* E[attr~=val] */ </style></head><body><div class="cls_biology">生物学</div><div class="c_div_kitty">hello kitty</div><div class="dog">---花花-----</div><div class="c_div_cat">猫，我歪了么？</div><div class="c_div_beauty">美丽ty</div><div class="yellow dog">---黄色的花花很黄-----</div><div class="cls_physical">物理</div><div id="d_id" custom="vincent">自定义标签</div></body></html>2.4、伪类（pseudo-classes）
CSS伪类是用来给选择器添加一些特殊效果。
anchor 伪类，专门用于控制链接的显示效果的
- a:link（没有接触过的链接）,用于定义了链接的常规状态。
- a:hover（鼠标放在链接上的状态）,用于产生视觉效果。
- a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。
- a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>2-4_伪类</title> <style> a:link{ color: red } /* 访问前 */ a:hover{ color: yellow; } /* 悬浮时 */ a:visited{ color: purple; } /* 点击时 */ a:active{ color: green; } /* 点击后 */ p:before{ content: '我要说'; color: #000; } p:after{ content: ' -- 高晓松'; } </style></head><body><a href="http://www.baidu.com" target="_blank">百度</a><p>生活不只有苟且，还有诗和远方</p></body></html>2.5、css优先级和继承
2.5.1、优先级
即在浏览器中被解析的优先顺序
规则如下：
* 1、内联表的权重最高 style=”color: yellow”
* 2、统计选择符中的id属性个数 #id
* 3、统计选择符中的class属性个数 .class_name
* 4、统计选择符中的html标签名个数 p、html、body、h1等
2.5.2、继承
简单的说就是所有被A标签的包裹的标签都会继承A的属性，如html标签有text-align: center;属性，那么所有的文本都会居中(如果在子标签中重新赋予新属性，则会覆盖，还是就近原则)
三、css的常用属性
3.1、颜色属性
<div style="color: blue">div color test</div><div style="color: #ffee33">div color test</div> //这里的#ffee33可以简写为#fe3<div style="color: rgb(255,0,0)">div color test</div><div style="color: rgba(255,0,0,0.5)">div color test</div>3.2、字体属性
<style> div{ font-size: 20px; /* 20%, larger */ font-family: 'Lucia Bright'; font-weight: lighter; /* bold, border*/ }</style><h1 style="font-style: oblique;">head one</h1>3.3、背景属性
<style> div{ background: pink; background-image: url('images/beauti.png'); background-repeat: no-repeat; /* repeat */ background-position: right top(20px 20px); /* 只有两个参数, center, center表示水平、垂直方向居中 */ }</style>3.4、文本属性
<style> div{ font-size: 10px; text-align: center; /* 水平居中 */ line-height: 200px; /* 文本行高，即文字加上、下空白的高度，如果是百分比的话则是基于字体的大小 */ vertical-align: -5px; /* 垂直对齐，行内元素有效，块级元素无效 */ text-indent: 150px; /* 首行缩进 */ letter-spacing: 5px; /* 每个字符之间的像素 */ word-break: 5px; /* 每个单词间的距离 */ text-transform: capitalize; /* 每个单词的首这字母大写 */ }</style>3.5、边框属性
<style> div{ border-style: solid; border-color: pink; border-width: 5px; /* border: 5px pink solid # 效果一样 */ }</style>3.6、列表属性
<style> div{ ul, ol{ list-style: decimal-leading-zero; list-style: none; /* 轮播图会用到 */ list-style: upper-alpha; list-style: disc; list-style: square; } }</style>3.7、display属性
<style> div{ display: none; /* 用于隐藏一个元素 */ display: block; /* 默认情况就是block */ display: inline; /* 将一个非内联元素变为内联元素 */ display: block; /* 类似 */ display: inline-block; /* 既具有内联元素的特性也有块级元素的特性 */ }</style>3.8、外边距和内边距
- margin: 用于控制元素与元素之间的距离
- padding: 内容与边框的距离
- border: margin到padding的最小距离
- content: 盒子的内容，可以是具体的文本或者其它的也可以是其它的例子
**注意**: height, width是修饰content的<style> div{ height: 300px; width: 300px; padding: 10px; border: 5px red solid; margin: 10px; }</style>3.9、float属性
- 正常文档流：将元素（标签）在进行排版布局的时候按照 从上到下、从左到右 的顺序排版的一个布局流
- 脱离文档流：将元素从文档流里取出，进行覆盖，其它元素会按照文档流中不存在的元素重新布局
- float(非完全脱离)
- clear(清除浮动)
- none: 默认。允许丙边有浮动对象
- left: 不允许左边有浮动对象
- right: 不允许右边有浮动对象
- both: 左右都不允许有浮动对象
- 注意：clear属性只会对自身有作用，而不会影响其它的元素，如果一个元素右侧有一个浮动元素，而这个元素设置了不允许右边有浮动元素，即clear: right;，则这个元素会自动下移一格，达到右边没有浮动对象的目的。
- overflow
-hidden的含义就是超出的部分要裁剪隐藏，float元素虽然不在普通流中，但是它是浮动在普通流之中的，可以把普通流元素+浮动元素想象成一个立方体。如果没有明确设定包含容器高度的情况下，它要计算内容的全部高度才能确定在什么位置hidden,这样浮动元素的高度就要被计算进去，这样容器才会被撑开，清除浮动。
- clear(清除浮动)
- float(非完全脱离)
3.10、position（定位）
position: absolute fixed(完全脱离)
position的几个属性值：
absolute:
- 定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
- 重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的
左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute;父元素设置position:relative;，然后Top、Right、Bottom、Left用百分比宽度表示。 - 另外，对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。
- 总结：参照物用相对定位，子元素用绝对定位，并且保证相对定位参照物不会偏移即可。
relative: 相对定位，相对定位是相对于该元素在文档流中的原始位置，即以自己为参照物，有趣的是，即使设定了元素的相对定位以及偏移值，元素还占着原来的位置，即占据文档流的空间。对象遵循正常文档流，但将依据top, right, bottom, left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义
注意：position: relative;的另外一个用法，方便绝对定位元素找到参照物
- static：默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。
关于位置的几个属性[单位：px]
- top
- left
- right
- bottom
注意事项：position在非static的情况下，会根据当前元素的父级元素来偏移
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>2-7_position-fixed</title> <style> .div-1{ height: 140px; width: 140px; background: darkgray; } .div-2{ height: 140px; width: 140px; background: greenyellow; position: absolute; bottom: 5px; left: 135px; } .div-3{ height: 350px; width: 350px; background: mediumvioletred; } .box{ position: relative; border: 5px red solid; } </style></head><body> <div class="div-1" id="top"></div> <div class="box"> <div class="div-2"></div> </div> <div class="div-3"></div></body></html>阅读全文
0 0
- HTML+CSS交互 (3)
- HTML+CSS(3)
- HTML+CSS交互 (3)
- 3-html-css
- HTML&CSS实验(3)
- 3D效果-HTML+CSS
- HTML&CSS Learning Notes 3
- HTML+CSS学习笔记3
- HTML基础 CSS基础3
- HTML CSS
- html/css
- HTML CSS
- HTML CSS
- HTML+CSS
- HTML CSS
- Html+CSS
- HTML/CSS
- html+css
- C++11 新特性：Lambda 表达式
- Java线程模型
- Android之Drawerlayout——实现侧滑菜单
- Python笔记目录
- 网络编程
- 3-html-css
- Merge k Sorted Lists leetcode java
- 实现KNN中的排序sorted
- HDU-4764-Stone 【巴什博弈】
- 精确率(precision)和召回率(recall)区别
- 2017年8月15日提高组T2 购买
- 避免创建不必要的对象。
- 条件变量
- SSL2705 2017年8月17日提高组T1 游戏（math+二分）
