前端学习笔记 - Css初级篇

有话先说:我是一只菜鸟,一只都是,从前是现在也是。

CSS中的会计元素与行内元素

块级元素特性:
占据一整行,总是重起一行并且后面的元素也必须另起一行显示。
内联元素特性:
和其他内联元素显示在同一行。

可以知道的是,行内元素和块级元素之间是能够相互转换的。趋于对网页模块化的搭建,后期行内转换为块级的例子会很多很多。

html中的块级元素列举如下:
 div(文档分区),article(文章内容), aside(伴随内容), audio(音频播放), blockquote(块引用), canvas(绘制图形), dd(定义列表中定义条目描述), dl(定义列表), fieldset(表单元素分组), figcaption(图文信息组标题), figure(图文信息组), footer(区段尾或页尾), form(表单), h1-h6(标题), header(区段头或页头), hgroup(标题组), hr(水平分割线), noscript(不支持脚本或禁用脚本时显示的内容), ol(有序列表), output(表单输出), p(段落), pre(预格式化文本), section(一个页面区段), table(表格), tfoot(表脚注), ul(无序列表), vidio(视频)。

内联元素列举如下:
b(粗体), big(大号字体), i(倾斜), small(小号字体), tt(等宽), abbr(缩写), cite(引用), code(计算机代码文本), dfn(定义项目), em(强调), kbd(键盘文本), strong(语气强调), samp(样本文本), var(定义变量), a(链接), bdo(元素可覆盖默认的文本方向), br(换行), img(图像), map(图像映射), object(对象), q(引用), script(定义客户端脚本), span(组合行内元素), sub(下标), sup(上标)
button(按钮), input(输入), label(标注), select(表单控件), textarea(文本域)。

CSS样式的类型

内部样式表(<style>...</style>)

外部样式表(<link href="style.css" rel="stylesheet"/>)

内联样式表(<p style="..."></p>)

border属性

border-width:边框宽度;

border-style:边框样式;(solid 实线,dashed 虚线,dotted 点线,)

border-color:边框颜色;

border:边框宽度 边框样式 边框颜色;(常常这样简写)

常见样式

结构样式:width:宽度; height:高度;background:背景;border:边框; padding : 内边距;margin: 外边距;

文本样式:font-size:文字大小(一般为偶数,最小一般设置为12px)font-family:字体;color:文字颜色;line-hight:行高;text-align:文本对齐方式; text-indent:文本缩进(2em);font-weight:文字着重;font-style:文字倾斜;text-decaration:文本修饰(下划线,上划线,删除线)letter-spacing:字母间距; word-spacing:单词间距;

background属性

repeat:背景图重复,默认就是背景图重复,还有no-repeat(背景图不重复),repeat-x(水平轴上背景图重复),repeat-y(竖直背景图重复)10px(x轴),50px(Y轴)也可为负数。center top(水平居中,竖直在顶端),fixed(背景固定,不管怎么拖动滚动条,该背景图都固定在相应位置。)

background-size:设置背景图的宽高;

选择器

类选择器(类选择器在css样式编码中是最常用到,可重复调用,英文圆点开头可任意命名);

ID选择器(在很多方面,ID选择器都类似于类选择符,但也有一些重要的区别。为标签设置id="ID名称",而不是class="类名称";ID选择符的前面是井号(#)号,而不是英文圆点(.)。)

子选择器(还有一个比较有用的选择器子选择器,即大于符号(>),用于选择指定标签元素的第一代子元素。)

包含选择器(即加入空格,用于选择指定标签元素下的后辈元素。)

通用选择器(功能最强大的选择器,它使用一个(*)号指定,它的作用是匹配html中所有标签元素)

伪类选择符(它允许给html不存在的标签(标签的某种状态)设置样式)

时间: 2024-10-29 10:45:37

前端学习笔记 - Css初级篇的相关文章

web前端学习笔记(CSS盒子的浮动)

Posted on 2013-09-18 09:00 Stephen_Liu 阅读(2205) 评论(6) 编辑 收藏 在标准流中,一个块级元素在水平方向会自动伸展,直到包含它的元素的边界:而在竖直方向和兄弟元素依次排列,不能并排.使用“浮动”方式后,块级元素的表现就会有所不同.      CSS中有一个float属性,默认为none,也就是标准流通常的情况.如果将float属性的值设置为left或right,元素就会向其父元素的左侧或右侧靠紧,同时默认情况下,盒子的宽度不在伸展,而是根据盒子里

web前端学习笔记(CSS变化宽度布局)

Posted on 2013-09-30 09:03 Stephen_Liu 阅读(2406) 评论(6) 编辑 收藏 一.“1-2-1”单列变宽布局: 对于变宽度的布局,首先要使内容的整体宽度随浏览器窗口宽度的变化而变化.因此中间的container容器中的左右两列的总宽度也会变化,这样就会产生不同的情况.这两列是按照一定的比例同时变化,还是一列固定,另一列变化.这两种都是很常用的布局方式.然而对于等比方式而言,相对比较简单,和我上一篇博客中1-2-1的布局方式非常类似,因此这里只是介绍一列固

web前端学习笔记(CSS固定宽度布局)

Posted on 2013-09-29 09:12 Stephen_Liu 阅读(2443) 评论(3) 编辑 收藏 一.单列布局: 这是最简单的一种布局方式,之所以给出该示例,还是为了保证本篇博客的完整性. <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>固定宽度布局</title> <style type="text/css"> #h

2016/12/8前端学习笔记CSS开始。

1 无序列表 ul>li:ul里只能有li,并且li里面可放元素却很多.li是容器级标签,什么都能放. 有序列表 ul>ol:一般不用 一般都是用ul>li 2 定义列表 dl:表示定义列表 dt定义标题 dd定义表述词儿(真实案例)京东下面购物指南.用什么标签不是根据样式决定 是根据语义 3 div容器级 span文本级(只能放文字图片表单元素) 4 表单:用于收集用户信息,用户填写的. 4.1 文本框:<input type="text" value=&qu

2016/12/10前端学习笔记CSS结束+JS开始。

18 浏览器兼容问题:IE6不支持小于12px的盒子,兼容方式: height:4px; _font-size:1px; IE6不支持overflow:hidden的方法清除浮动,所以,需要 用 : overflow: hidden; 与_zoom:1;两条代码做兼容处理 css属性之前加上下划线是IE6的专有属性 例如:_background-color:red; 19 margin的塌陷:在标准文档流中竖直方向的margin会有已较大margin 为准的塌陷现象.但是浮动后没有塌陷. 20

WEB前端学习笔记 五

接web前端学习笔记第四篇,此篇为web学习笔记 五,在此感谢您的采集和转发,但请注明文章出自网知博学. 2.0.3  html标签的属性格式 现在我们知道了两个双标签分别是,标题标签:<h1> - <h6>.和段落标签:<p></p>还知道了一个换行的单标签:<br />,现在我们给<p></p>标签添加一个属性,来改变段落是右对齐,还是左对齐,还是居中. 如上图,<p>标签中的 align(中文就是排列的意

WEB前端学习笔记 一

最近时间比较充裕,整理了一下学习过的笔记,此篇笔记包含了:Html.Css.JavaScript.Jquery.以及使用帝国CMS或是织梦CMS建立自己的网站,也许也会整理一下PHP的笔记,如果时间允许会整理完全. 虽然笔记是从最基础的开始,但是,并不包含电脑的基础知识,所以你必须已经掌握了一些电脑的基本操作,比如开关机,你的电脑用的是什么操作系统,至少也要会用word和wps吧.浏览器是做什么的,什么拷贝.复制.粘贴.知道最基本的文件类型,如,文本文件,视频文件,图片文件,什么是可执行文件,分

WEB前端学习笔记 四

接上一篇,web学习笔记 四,在此感谢您对此篇笔记的认可,但转发时请注明文章出自网知博学. 2.0  html的语法格式 html的标签要写在尖括号中 :<> 在在英文输入法状态下,按住shift键然后再按它左侧的尖括号就可了, 先学习一个简单的h1标签,是个标题标签,在html中这样写: <h1>我在h1标签中,我就是标题</h1> 那么h1标签中所包裹的文字,就标记成标题了.通过浏览器的解析后在页面上显示出来的效果就是字体加粗,加黑,和word中的标题性质一样! 大

Web前端学习笔记(001)

....编号    ........类别    ............条目  ................明细....................时间 一.Web前端学习笔记                                    2016年6月15日10:38:53    /****************************************************************begin******************************