前端学习笔记 - 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不存在的标签(标签的某种状态)设置样式)
前端学习笔记 - Css初级篇的更多相关文章
- web前端学习笔记(CSS变化宽度布局)
一.“1-2-1”单列变宽布局: 对于变宽度的布局,首先要使内容的整体宽度随浏览器窗口宽度的变化而变化.因此中间的container容器中的左右两列的总宽度也会变化,这样就会产生不同的情况.这两列是按 ...
- web前端学习笔记(CSS固定宽度布局)
一.单列布局: 这是最简单的一种布局方式,之所以给出该示例,还是为了保证本篇博客的完整性. <html xmlns="http://www.w3.org/1999/xhtml" ...
- web前端学习笔记(CSS盒子的定位)
相对定位 使用相对定位的盒子的位置常以标准流的排版方式为基础,然后使盒子相对于它在原本的标准位置偏移指定的距离.相对定位的盒子仍在标准流中,它后面的盒子仍以标准流方式对待它. 使用relat ...
- web前端学习笔记(CSS盒子的浮动)
在标准流中,一个块级元素在水平方向会自动伸展,直到包含它的元素的边界:而在竖直方向和兄弟元素依次排列,不能并排.使用“浮动”方式后,块级元素的表现就会有所不同. CSS中有一个float属性 ...
- 前端学习笔记——CSS选择器
学习css选择器之前我们先了解下css规则: CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明: 选择器通常是需要改变样式的 HTML 元素. 每条声明由一个属性和一个值组成. 1.id选 ...
- 前端学习笔记--css案例
要实现的案例: 1.分析布局 2.划分文件结构: 3.编写css代码 * { padding: 0; margin: 0; } body { font-size: 16px; color: burly ...
- 前端学习笔记--CSS布局--float定位
1.float属性 box1向右移动,box2顶替了box1的位置,box3顶替了box2的位置. 2.clear属性 案例: 一列三行布局: <!DOCTYPE html> <ht ...
- 前端学习笔记--CSS布局--文件流定位
1.概述 2.文档流定位:从上到下,从左到右 代码: <!DOCTYPE html> <html lang="en"> <head> <m ...
- 前端学习笔记--CSS入门
1.css概述: 2.css语法: 3.css添加方法: 用单独的文件存储css样式的优点: 优先级: h3得到的样式是内嵌样式覆盖了外部样式. 4.css选择器 标签选择器: 类别选择器: ID选择 ...
随机推荐
- XLT格式化XML那点事(C#代码中的问题解决)(二)
接上篇<XML通过XSL格式化的那点事(XML到自定义节点折叠显示)>,本文就如何将大的XLST分割成小文件和如何用C#将XML通过XSL生成HTML文件中的问题做下分析,避免有同样需求的 ...
- mysql 优化(一)
SHOW VARIABLES like 'slow_query_log' #查看慢查询设置 1 set GLOBAL slow_query_log_file ="d:/sql/sql_l ...
- [转载]python:open/文件操作
open/文件操作f=open('/tmp/hello','w') #open(路径+文件名,读写模式) #读写模式:r只读,r+读写,w新建(会覆盖原有文件),a追加,b二进制文件.常用模式 如:' ...
- [No00007B]DreamweaverCC 的CSS代码格式化
Dreamweaver自带的代码格式化功能. 1.步骤:命令 -> 应用源格式. 2.你可以选择你的偏好.特别是css代码,有些人喜欢每个属性单独一行,有些人喜欢把所有属性写在同一行.步骤:编辑 ...
- LoadLibrary加载动态库失败的解决办法
from:http://blog.sina.com.cn/s/blog_62ad1b8101017qub.html 若DLL不在调用方的同一目录下,可以用LoadLibrary(L"DLL绝 ...
- HTTP状态码对应
HTTP的状态码 对于状态码大家如果经常在线买东西就能知道,我们买了东西就会有个订单状态:出库.发货中.送达中.送达等,其实这些状态就是状态码,只不过这些状态码都是文字.HTTP 响应的时候也有状态码 ...
- JavaScript 特殊对象 Array-Like Objects 详解
这篇文章拖了有两周,今天来跟大家聊聊 JavaScript 中一类特殊的对象 -> Array-Like Objects. (本文节选自 underscore 源码解读系列文章,完整版请关注 h ...
- Win10 UWP 开发学习代码(不断更新)
页面之间跳转(传值) string txt = "Spring Lee"; this.Frame.Navigate(typeof(BlankPage1),txt); 另一个页面接收 ...
- URLConnection类介绍
URLConnection是一个功能强大的抽象类,它表示指向URL指定资源的活动连接. 与URL类相比,它与服务器的交互提供了更多的控制机制.尤其服务器是HTTP服务器,可以使用URLConnecti ...
- gulp watch出现Error: watch null EPERM的问题解释
出现这样的问题,一般是第一次运行导致的,而且任务上有删除文件的操作. 我观察发现,只要把输出目录的文件删除,然后重新运行watch就一些ok,后者再运行一次gulp watch就一切正常.