Html+CSS学习笔记
来源:互联网 发布:微信打不开淘宝链接 编辑:程序博客网 时间:2024/06/07 06:28
前端的基本组成:
- 结构 html
- 表现 css
- 行为 JS
文档说明
声明文档的类型,是Html4 还是 xhtml 还是H5
<!DOCTYPE html/>H5的文档说明
字符集
声明一个网页的编码的格式。
<meta charset="utf-8" />//声明这个html文件的编码格式为UTF-8
有关于空格
html中,字符之间再多的空格,浏览器也会当成一个空格,同样,换行也一样。也会当成一个空格。
实体
不能直接使用<> 等特殊字符,需要使用一些特殊的符号,这些特殊符号成为实体,(转义字符)
实体以&开头,;结尾 参考
内联样式
就是把样式写到标签里面的style里面。内联样式只对当前标签起作用。
内部样式表
将css属性写在head里面的style里面写样式。
外部样式表
将样式独立分开写到一个独立的css文件中,在head里面导进去,就可以使用这些属性。
<link rel="stylesheet" type="text/css" href ="style.css"/>
块元素和内联元素
- 块元素:块元素会独占一行,常见的块元素:div h1 p
- 内联元素(行内元素):只会占用自身大小。常见的内联元素:span a img iframe,(span 专门用来选中文字,来设置样式)
- 块元素一般要用来布局,内联元素一般为元素设置样式。一般用块元素包含内联元素,内联元素一般不会包含块元素
- 特殊1:a可以包含任意的元素,包括块元素,除了a本身以外。
- 特殊2: p元素不能包含其他任意的块元素。
css选择器
- 元素选择器:p{} 选中所有的p元素
- id选择器:#id{} 一个页面中有且仅有一个。
- 类选择器:.{} 一个页面中可以有多个(一个元素里面可以有多个class,多个class之间用空格隔开)
- 选择器分组,选择器1,选择器2{},满足选择器1和满足选择器2的元素全部都会选中(或关系)
- 通配选择器:*{}选中所有元素
- 复合选择器,选择器1选择器2{}(多个选择器直接挨在一起,表示既要满足选择器1又要满则选择器2,复合选择器一般是类选择器和元素选择器组成,一般不会包含ID选择器,因为id已经可以确定唯一性了。前面的组选择器是或关系,这个是且的关系)
- 后代选择器 表示选择元素里面的元素,元素之间用空格隔开
div span{} 表示选中div里面的span元素#divid span{} 表示选中id为divid里面的span元素#divid p span{} 表示选中id为divid里面的p元素里面的span元素
- 子元素选择器 表示选择直接子元素,其他子元素都不要
div > span 表示选中div里面的直接的span元素,不要孙元素
- 伪类选择器:专门用来表示元素的特殊的状态,例如超链接是否访问过、文本框是否获取焦点等。。。
:link 普通的链接,也就是没访问过的链接:visited 表示访问过的链接,只能设置字体的颜色,其他属性不起作用,例如不能设置字体的大小等。:hover 表示鼠标在上面的时候:activity 被激活的时候,也就是正在点击的时候。 hover 和 activity 不仅可以给a标签起作用,还可以给其他的标枪使用:focus 获取焦点的时候。例如:input输入框的获取焦点的时候。::selection 选中,也就是鼠标选中页面上的内容的时候(火狐里面需要::-moz-selection)moz只支持火狐浏览器,
- 伪元素选择器:表示元素中特殊的位置。
:first-letter 表示首字母:first-line 表示第一行:before 表示标签之后,内容之前的部分:after 表示标签之前,内容之后 before和after要结合content使用。p:before{content:"我是前面"} 表示在P标签的前面加上content这段文本
- 属性选择器:可以根据元素中是否有某个属性,或者具有某个属性值,例如:title属性,表示鼠标移动到元素上的时候,元素的属性提示就会出来。
p[title] 表示具有title属性的p元素p[title = abc] 表示具有title属性,并且属性值必须是abc的p元素p[title ^= 'ab'] 表示具有title属性,并且属性值必须是以ab开头的属性的p标签。p[title $= 'c'] 表示具有title属性,并且属性值必须是以c结尾的p标签。p[title *= 'c'] 表示具有title属性,并且属性值必须要有c 的P标签
- 其他子类选择器:
:first-child 第一个直接子元素p:first-child 表示所有的直接P元素中的第一个body > p:first-child 表示body里面的直接子元素中的第一个p元素:last-child 和first-child就差不多了,:nth-child 表示第几个元素 当传even的时候表示偶数,odd表示奇数p:nth-child(2){} 表示选中直接子元素的p当中的第二个元素;:fist-of-type:last-of-type:nth-of-type 这三个和前面三个差不多,只不过前面三个必须要是第一个,而这三个前面还可以有其他子元素,前面三个表示元素前面不能有其他子元素
- 兄弟选择器
span + p 表示选中span之后的第一个p元素,span和p之间不能有其他元素span - p 和 + 一样,一前一后span ~ p 表示span后的所有的p元素,其中span 和 p之间可以有其他元素,也可以没有
- 否定选择器:也就是选中全部,不要某一个,和选中相反。选中的所有元素中剔除某个元素
p:not(.cls){} 表示选择除了class为cls的p标签以外所有的p标签,
- 选择器的优先级
使用不同的选择器选中同一个元素的时候,选择器有一定的优先级;id选择器的优先级大于类选择器,类选择器的优先级大于元素选择器选择器的优先级: 内联样式:1000 (指的是style写在标签里面) id选择器:100 类和伪类:10 元素选择器:1 通配选择器:0 继承的样式:没有优先级 (继承表示父元素的属性)选择器中有多个选择器的时候,多个选择器的优先级相加,谁的大就谁优先(但是要注意的是:10个类选择器最多也就优先级为90,不可能超过100)(选择器的优先级一样,谁在样式的后面,谁生效)(在样式的后面写!important在属性值的后面,分号的前面的时候,优先级最高)
- 伪类选择器的优先级:伪类选择器的优先级是一样的。 但放置的位置不一样会有不一样的效果(伪类选择器的顺序应该是link visited hover active)
标签
常用的html标签
- 注释
不论啥语言,都有注释哈,首先来看看html的注释是怎么写的。<!-- -->html 的注释用上面这种标签包裹,可以是多行,也可以是单行的注释
- font
<font color="red">内容<font> //字体标签,标签内的内容的颜色为红色,font 的 size 最大为7
- h 标题
<h1> - <h6>,标题标签,1最大,6最小。
- p
段落,最后自动添加一行空格。p元素内不能包含任何函数。
- br
换行标签( 自结束标签)
- hr
一条水平线(自结束)
- img
src:指定图片的地址;alt:图片描述,在图片没有的时候显示,搜索图片检索的时候,需要用到altwidth 和 height 只指定一个的时候,图片会按比例放大或者缩小。图片适用原则:效果一致。使用小的,效果不一致,使用好的。img 也是一个自结束标签
- meta
可以使用这个标签来设置网页的关键字,描述,请求的重定向等。name:名字 keywords,description等。content:内容,里面的内容可以用逗号分隔。<meta http-equiv="refresh" content="5;url=www.baidu.com"> 5秒后打开baidu
- iframe
内联框架,src,指定框架的页面
- a
超链接,href 属性指定目标跳转的 urltarget 指定打开链接的位置。_self 自身,_black 打开一个新的窗口。也可以是iframea元素可以包含任意元素。除了它本身,也就是不能自我包含
- center
居中,里面的内容都居中
- div
块元素,会独占一行,无论内容多少都会独占一行块元素有:P h1 h2 h3 等div和其他块元素的区别,它是一个纯粹的块元素,主要的作用是对页面进行布局。
- span
span是内联元素,行内元素,只占自身大小的元素,不会占用一行。常见的内联元素,a img iframespan 也没有任何语义,span专门用来选中元素,来进行设置样式。
- em 和 strong
两个都是强调,em一般用于一段文字的某一部分,而strong表示整段的。
- i 和 b
i 表示斜体 b 表示加粗
- small 和 big
small 小 big 大 这两个标签常用于一段文字中,某个部分大一点或小一点
- cite
表示引用或参考 多用于书名歌名等用书名号引起来的
- q 和 quoteblock
两个都是引用 q用于短引用,会自动的加上双引号,quoteblock 表示块引用,会独立成一块显示
- sup 和 sub
一个表示上标,一个表示下标,上标例如数学中次方的显示,下标一般用于化学符号的显示,例如水是H2O 2就用下标显示
- del
删除,会自动的给标签里面的文字添加删除线
- ins
插入,会自动的给标签里面的内容添加下划线
- pre
预格式标签,也就是会保留代码里面的格式,不会因为多个空格压缩成一个空格等。代码里面文字是怎么样就怎么样
- code
没啥意义,只是表示这是代码
- 列表标签
- ul li 组成的无序列表
- ol有序列表
- 定义列表 dl dt dd
ul 表示一个列表 type ='disc' 实心圆点 默认 type = quote 实心的正方形 type = circle 空心的圆 一般都不要type 一般用css去除掉,list-li 表示列表里面的一个列表项ol有序列表,区别是,有序列表前面多了序号123ol的type 可以指定类型。 type = 1 a A i、I(罗马数字)定义列表 dl dt dddl 是定义一个定义列表dt 表示被定义的内容dd 对我们定义内容的描述ul dl ol 之间可以相互嵌套
Html 布局
- 长度单位
- px 像素
- % 百分比,表示占父元素的百分之多少。好处是父元素的改变的时候,子元素的大小也会改变
- em 和百分比类似,它是相对于当前元素的字体大小来计算的
1em = 1 font-size
- 颜色
特殊的颜色可以直接写,例如,red green等,,,rgbbackground-color:rgb(161,187,209);background-color:rgb(1%,18%,20%);表示255乘以百分比background-color:#e43d2a;字体颜色:直接只用color
字体
字体大小,浏览器默认的字体大小是16px
font-size,设置字体的大小。其实设置的并不是文字本身的大小,而是文字占有的大小。
- font-family,设置字体的样式。font-family:微软雅黑;宋体,等等
当采用某种字体,当前浏览器有,就使用指定的字体,没有就显示默认的字体。该样式可以指定多种字体,也就是可以接收多个参数,每个参数之间用逗号分开。当采用多个字体的时候,浏览器会优先使用前面的,没有就下一个,一直没有就默认咯。查看计算机中有什么字体,在C盘window里面的font文件夹里面字体的分类 sans-serif 非衬线字体 minisoace 等宽字体 curisive 草书字体 fantasy 虚幻字体 衬线和非衬线的区别是:衬线字体笔画头尾字体大小不一,非衬线字体,字体笔画的头尾大小一致。 等宽字体,表示每个字体的宽度占的位置都一样。
- font-style 字体样式
normal 正常italic 斜体oblique 倾斜 italic 和 oblique在大部分浏览器上是一样的 ,一般不会用obliqueinherit 继承父元素的字体样式 font-weight 用来设置字体的加粗normal 正常bold 粗体bolder 更粗lighter 更细还可以接收数字,100-900的整百的数值,但大部分浏览器并不支持,也就是100-500都一样的
- font-variant,以用来设置小型大写字母
normal 正常small-caps 小型的大写字母(所有的字母以大写的形式存在,但字母的大小比正常的大写字母要小)
- font 样式,可以设置font-XXX的属性,可以设置5个相关的样式,将不同的属性用空格分开
例如 font:italic small-caps bold 60px ‘微软雅黑";这些属性的顺序可以随意调换。也可以不写。字体大小和样式,必须存在,且大小在倒数第二个位置,样式在最后一个。5个属性合并在一起写的话,性能会比较好。
常见的布局属性
- line-height 行高
line-height = 30px;表示行高为30px;line-height = 150%;表示行高为字体大小的百分之150;line-height = 1;表示一倍行高,跟100%是一样的效果line-height 和 height 的大小一致的话,可实现字体在父元素中居中行高属性,还可以跟在字体的属性后面。例如 font:30px/50px;表示字体大小为30px,行高是50;
- text-trnsform
可以用来设置文本的大小写,这个属性对英文起作用,因为中文是没有大小写之分的none 默认值capitalize 单词首字母大写,所有的单词的首字母都大写,通过空格来识别单词uppercase 所有的字母都大写lowercase 所有的字母都小写
- text-decoration 给文本添加装饰效果
none 默认值,没效果underline 在文本添加一条下划线overline 文本顶端添加一条线line-through 添加一条删除线a 标签的默认值是underlinne 需要去除超链接的下划线,去掉只需要设置为none就可以了
- letter-spacing 设置字符之间的距离
none10px 表示每个字符之间的间距是10px;对中英文都有效果
- word-spacing 设置单词之间的间距
和 letter-spacing 一样,这个属性,对英文有效果,对中文,很奇怪,每个词之间不会起作用,只会在遇到空格的时候起作用
- text-align 对其方式
left 默认左对其right 右对齐center 居中对齐justify 两端对齐
- text-indent 首行缩进,只对第一行起作用。
20px 表示首行缩进20个像素。2em 表示缩进两个字的大小。可以是负数,表示缩进去了,隐藏了
- width height 宽高
只是内容区域的大小,不包括border,padding等。
- border 边框
border-width 边框大小 接收1个值的时候, top right bottom left 都一样 接收2个参数的时候,表示上下,左右 接收3个参数的时候,表示 上 左右,下 接收4个参数的时候,表示 上右下左上面这中规律适合于下面这两种属性 border-width 还可以单独设置。 border-left 20px,表示,左边的边框的大小为20px。border-color 边框颜色border-style 边框样式 solid 实线 dotted 点状边框 dashed 表示虚线边框 double 双实线 其他值不常用大部分浏览器的边框的宽和颜色都有默认值的,如果没有宽和颜色,那么默认都是0如果设置了宽没设置颜色,那么颜色就会使用默认值,只设置了颜色没有设置宽,那么就会使用默认的宽border的简写,border : 30px red solid;
- padding 内边距
会影响我们元素的盒子的大小
- margin 外边距
如果将 left 和 right 的两个值设置为auto的话,会自动的在这个元素的父元素中居中。margin:0 auto;居中垂直方向的外边距重合的时候,会取他们的最大值,而不是求和如果父元素和子元素的外边距相邻,则会把子元素的外边距设置给父元素。(也就是父元素的第一个子元素的外边距会给父元素)
内联元素不能设置width和height(可以设置水平方向的padding,垂直方向的可以设置,但不影响布局)
display
inline 可以将一个元素当作内联元素显示,也就是行内元素block 可以将一个元素设置块元素显示inline-block 将一个元素转换成行内元素,可以将一个元素既有行内元素的特点,也有快元素的特点,既可以设置宽高,也不会独占一行none 此元素不会被显示,隐藏元素
- visibility
可以用来显示和隐藏元素visible 显示 默认是显示的hidden 隐藏,是占位隐藏,也就是没了,但依旧占着茅坑
- overflow 定义溢出的内容怎么样显示
visible 默认,不会对溢出的内容进行处理hidden 隐藏scroll 滑动,不论内容是否溢出,都会加上水平的和垂直的滚动条auto 内容会被修剪。会根据需要是否加上滚动条
- float 浮动
默认是none,在文档流中,垂直摆放;left 向左浮动;right 向右浮动,元素脱离文档流的时候,下边的元素会自动的向上移动元素浮动后,会尽量想页面的左上或者右上浮动,知道遇到父元素或者其他兄弟浮动元素。如果浮动元素上边是一个没有浮动的块元素。则浮动元素不会超过块元素,浮动的元素不会超多他上边的兄弟元素,最多最多一边齐。浮动的元素不会盖住文字,文字会自动环绕在文字的周围。可以用来设置文字环绕的效果如果div的width不设置的话,会自动的占满一行,但如果设置了浮动,那么,宽会被内容撑开。高也一样。
- BFC 和 hasLayout
文档流中,父元素的高度默认是被子元素撑开的,如果给子元素设置了float,那么父元素的高度就沦陷了。BFC(block formatting context)IE6(包括6)以下的浏览器不支持 父元素的垂直外边距不会和子元素重叠 开启bfc的元素不会被浮动元素重叠 开启BFC的元素可以包含浮动的子元素开启bfc的方式 设置元素浮动(设置父元素的浮动) 设置元素的绝对定位 使用这2种方式,可以撑开父元素,但会导致父元素的宽度丢失,而且使用这种方式会导致下边的元素上移 设置元素为 display:inline-block 可以解决问题,但还是宽度还是丢失。 将元素的overflow设置为非visible,例如设置为auto或者hiddenIE6以下是不支持BFC的,但还有一个属性,hasLayout属性,也是一个隐含的属性。开启hasLayout的方式 设置zoom属性,这个属性表示放大N倍,zoom:1;表示放大1倍,也就是不变。 这种方式只支持IE,且是在IE8以下,其他浏览器都不支持。
1 1
- HTML/CSS学习笔记
- HTML CSS学习笔记
- HTML+CSS学习笔记
- HTML + CSS学习笔记
- HTML&CSS学习笔记
- HTML&CSS学习笔记
- HTML、CSS学习笔记
- html&css学习笔记
- HTML+CSS学习笔记
- HTML/CSS学习笔记
- HTML+CSS学习笔记
- html+css学习笔记
- HTML+CSS学习笔记
- html+css学习笔记
- HTML/CSS学习笔记
- HTML&CSS学习笔记
- HTML CSS学习笔记
- HTML/CSS学习笔记
- Junit总结
- MFC 创建对话框,最大化取消边框【重绘最大化,最小化,关闭按钮下篇文章在去描述】
- Linux之学习笔记一
- Ubantu下Spark独立应用程序编程的Java编程应用
- HDU4768:Flyer(二分)
- Html+CSS学习笔记
- Java8 新API读取文件内容
- 四种方法js实现点击<li>弹出索引
- UIlabel点击全文扩展
- 防止SQL注入的五种方法
- eclipse端口被占用(java.net.BindException: Address already in use: bind)解决方法
- 画“猫”神器
- 230. Kth Smallest Element in a BST
- 从《货殖列传》中学习炒股