基础知识
- 文本使用闭合标签(标签,段落,文本)<p></p>
- 引用文本使用自闭和标签 <img src='' alt=''/>
css display属性1:block(可以设置宽和高),2:inline(不可以设置宽和高,可以设置line-height),3:table-cell,能实现子元素等高4:inline-block。 html实体用于生成那些在键盘上没有的字,以&开始，以;结束。如&nbsq;实体网址http://www.elizabethcastro.com/ html/extras/entities.html
为文档添加样式的三种方式
- 行内样式 <p style=""></p>
- 嵌入样式 <style type="text/css">p {}</style>
- 引入样式 <link href="style.css" rel="stylesheet" type="text/css"/>
- 在css里面引入其他css @import url(css/style.css),注意的是@import必须要放在样式表中其他表之前,否则不会被加载.
几种css选择符
- 多个选择符:h1,h2,h3 {color:red}
- 后代选择符:article p {color:red}
- 子选择符:article > p {color:red}
- 紧邻同胞选择符:h2 + p {color:red} 选择紧邻h2的p元素
- 一般同胞选择符:h2 ~ p p只要在同胞h2元素后面就行.不需要紧邻
- 通用选择符: * 会选择所有的元素。section * a{}会选择所有section的孙子含有a标签的元素，不管孙子含有a标签元素的父元素是什么,section的子元素a不会被选中.
- id(#)选择符和类(.)选择符。id还能用于页面内导航链接,<a href="#bio">biography</a>。#表示链接在当前的页面中,不会触发浏览器加载页面,<h3 id="bio">链接在这里</h3>。当点击a标签时,会调到id="bio"的h3标签。<a hrf="#">back to top</a>点击会返回顶部。
属性选择符:
- 属性名选择符 img[title] {color:red}
- 属性值选择符 img[title='test'] {color:red}
伪类
- UI伪类
- 链接伪类 a:link /visited/hover/active :表示伪类.::是css3表示的伪类。以后会统一为::,
- e:focus伪类, e可以为input p h1
- :target伪类,用户点击指向页面的其他链接,则那个元素就是target,<a href="#more_info"></a>,#more_info:target {color:red}选中的就是<h2 id="more_info">kkkkkk</h2>,当点击a链接转向ID为more_info的元素时,会把id为more_info的h2的字体颜色改为红色
- 结构化伪类 根据标记结构应用样式.
- e:first-child,e:last-child,ul li:first-child {color:red}
- e:nth-child(n) e位元素名,n可以为数字,也可以为odd或even,li nth-child(odd)
伪元素
伪元素就是你文档中若有实无的元素,详情http://www.stylinwithcss.com,加上无形的标签和样式。
- e::first-letter 例如p::first-letter{color:red},为p标签加上第一个字为红色.
- e::first-line p::first-line,选中p段落的第一段。
- ::before,::after,用于在特定的样式前/后添加特殊内容.例如<p class="age">25</p>.加如下样式p.age::before {content:'Age: ';},p.age::after{content:' years.'},在页面上展示Age: 25 years.,在content包含的空格、
继承
css有很多内容是可以被继承的,比如字体,颜色,字号。不能被继承主要是涉及到盒子的定位和显示方式,如边框边距等.注意,由于字体和文本样式是可以继承的,在使用字体大小时用%和em时要格外小心,如果某个标签的字体大小设为80%,而它的一个后代的字体大小也被设了80%,那么后代文本字体大小为64%.
层叠
3:定位元素
盒模型:就是为html元素生成一个矩形盒子
页面板式只要由三个属性控制:position,display,float属性
理解盒模型:border(边框)，padding(内边距)margin(外边距),在每个css文件前写,*{margin:0;padding:0},目的:浏览器兼容.垂直方向上的外边框(margin-top和margin-bttom)会重叠,取绝对值大的数值,水平方向不会重叠.设置的width:100px,只是内容的宽度.不上盒子的宽度(还要border,padding,margin宽度),
浮动和清除:float和clear.浮动主要是文字环绕图片.他就是要求浏览器把它往上往左,往右方推,知道碰到父元素的内边界.浮动非浮动元素时必须设置一个宽度,不然样式不好控制.float脱离文档流,其父元素(有内边距不知道会不会包含)不能包含浮动元素,如何让父元素包含子元素,1:在父元素添加overflow:hidden,(不直观,它的真正用途是防止包含元素被超大元素撑大).2:同时浮动父元素,需要设置父元素的宽度.3:在父元素最后添加非浮动的子元素.然后清除该元素设置clear:both.
定位:static,relative,absolute,fixed,默认是static,没有bottom,left等属性偏移,relative:相对它原有文档流(默认位置)的位置,进行top,left等改变位置, 会覆盖其他static的元素(原有文档流中位置依旧存在).absolute:彻底从文档流中拿出来.相对的是父元素的position不为static的偏移.fixed也从文档流中拿出来,相对于屏幕
显示属性:display:inline,block,none,inline-block,table-cell.设置none属性该元素及其包含的元素,都不会再页面中显示.占住的空间也会被回收.visibility:hidden,元素会隐藏,有空间存在.
border有四个属性:border-width,border-color,border-style(有none,hidden,thick,dotted,dashed,solid,double,groove等),border-radius.
背景 背景颜色和背景图片
background-repeat:reapy(默认),repeat-x,repeat-y,no-reapt;css3新增了:round(不剪切图片,调整图片大小),space(不剪切图片,调整图片的间的空白); background-position:top,left,right,bottom,center;两两组合显示图片放的位置。background-size:设置图片的大小.50%为背景图片的一半,cover拉大图片,完全填满背景区,contain缩放图片适合背景区不填满的(都是保持宽高比)。
背景粘贴:background-attachment:控制滚动元素内的背景图片是否随元素滚动而移动.scroll(默认)会移动;fixed不会移动 背景渐变:1线性渐变：backgroud:linear-gradient(left,#fff,#ddd)从一端变到另一端.放射性渐变:从一点向四周扩散background:radial-gradient()
字体:1：机器中安装的字体,2:保存在第三方网站上的字体,用link引入.3:保存在你的web服务器的地址用@font-face规则随网页一起发送给浏览器。属性：font-family,font-size,font-style(正体或是斜体),font-weight(字体大小),font-variant,默认情况下1em=16px,三种字体大小:1:绝对字体大小px。2相对字体大小:(em(相对最近被设置过的祖先元素字体大小)或rem(相对根元素的大小)).用em的一个技巧:可以吧设font-size:62.5%,可以把基准16px改为10px,那么1em=10px,1.5em=15px
文本属性:{text-indent:3em}文本缩进,letter-spacing(字符间距),word-spacing(单词间距),text-decoration(文本装饰line-through等),text-align(文本对齐left,right,center,justify),line-height(行高),text-transform(文本转换),vertical-align(垂直对齐多对化学分子式有用)
页面布局
多栏布局有三种实现方案:1固定宽度(大小不变) 2流动(随浏览器窗口大小改变而改变) 3弹性(和流动布局类似,连文字都改变太复杂) 响应式布局:设备支持css媒体查询,适应各种屏幕宽度的可变固定布局.
浮动偏移:为固定宽度(为content的宽度)的元素添加水平外间距,边框,内边距. 导致浮动框总体的宽度变长.可能会偏移。解决1；从设定content的宽度中减去各种边框的宽度。2：在容器内部添加内边框或外边距.3:使用css3的box-sizing:border-box属性.给元素设置此属性后,此元素的边框和内边距都不会增加。content会变小
子-星选择符：selector * 就可以选择selector所代表的所有后代元素selector > * 选择selector所代表的所有子代元素
三栏-中栏流动布局:1 使用负外边距实现.p183 2 用css3单元格实现。把三栏设为display:table-cell
li+li 非子类选择器.display:in-line收缩包围内容,display:block,扩展填充父元素
