sSMiroSs sSMiroSs
别逗了
关注数: 25 粉丝数: 199 发帖数: 1,311 关注贴吧数: 54
新的一年,保持客观,积极向上,不要麻木,热爱工作 CSS知识点回顾 声明:CSS知识点越来越多,越来越杂,为巩固所学,形成知识点,现按老师所讲来进行知识点回顾,此过程不单单只是回忆还有知识点的总结和提炼,为方便以后使用。 1.CSS的的三种写法 1.1内嵌式写法 例: <head><style></style></head> 内嵌式写法的特点是: 1.书写比较方便 2.影响的只是当前的页面(比较小) 3.没有实现HTML和CSS的完全分离(因此不便于后期的维护) 1.2行内样式写法 如: <p style=”color:red;font-size:13px”></p> 注意不同的属性之间要用;隔开 行内样式的书写特点是: 1.书写比较简单 随手就来; 2.影响的仅是当前的标签(范围极小); 3.没有实现HTML和CSS的完全分离,因此也不便于网页的后期维护 1.3外联式写法(以后项目最常用) 写法如下: 首先新建一个独立的CSS的文件 然后在原HTML页面里的<head></head>里新建一个<link rel=”stylesheet” type=”text/css” href=””>这里涉及到相对路径的问题 外联式写法的特点是: 1.css在独立的一个文件里写明 2.影响的范围是整个站点 3.实现了HTML和css的完全分离,便于网页的维护 2.HTML的标签元素分类 分类的依据是根据标签的显示效果不同来界定的 2.1块级元素 主要代表是<div></div> <p></p> <h></h><li></li> <ul></ul>(以此类推其他列表也是如此) 需注意的是 1.在实际练习的过程中 <div><p>中的padding值和margin值都是0;而<ul>有一个默认的padding-left:40px; 2.在对块级元素设置样式的时候要注意首先设定它的 height不然,效果和bg显示不出来 块级元素的特点是: 1.独占一行 2.可以设定宽度和高度 3.在子盒子未设定宽度的时候,子盒子与父盒子的宽度一样 2.2行内元素 主要代表:<span></span> ;<label></label>;<font></font>;<a href=””></a> 行内元素的特点是: 1.行内元素可以在在一行内显示; 2.通常不能独占一行; 3.不能设置宽度和高度 2.3行内块级元素 主要代表是:<input type=””> <img> 行内块级元素的特点是: 1.所有元素可以在一行内显示 2.可以设定宽度和高度 3不同元素之间的转换 块级元素:block; 行内块级元素:inline-block; 行内元素:inline; 不同元素之间可以通过CSS的display属性来实现。 如将元素转化成块级元素 display:block; 4.CSS的三大特性 4.1层叠性 当调用样式时发生冲突时,这时应调用在样式表里的最后面一个的 如<p>一段文字</p> p{color:red;} p{color:yellow;} 这时候文字应当调用最后一个声明的,因此此处字体的颜色应该是yellow; 4.2继承性(主要发生在子盒子未设定样式的情况下) <div><p></p></div> 如果这时候只给div设定了样式,而p没有这时候p继承div所有关于文字的属性,此外还可以继承width与line-height的属性; 特别注意的是: 1.<a>超链接不能继承文字颜色的属性 2.标题标签不能继承font-size 的属性 4.3优先级 关于优先级的需要了解的是: 权重由大到小 标签选择器<类选择器<id选择器<行内样式写法<! important 1.继承的权重为0; 2.权重会叠加 (官大一级压死人,描述地越详细,权重越高); 5.伪类(针对a标签) a:link{ } 在未访问下的样式; a:visited{ } 访问过后的样式; a:hover{ } 光标在链接上的样式; a:active{ } 链接被激活后的样式; :focus 设置对象在成为输入焦点的onfocus时的样式表属性,也就是在<input>输入框中正在输入时的样式 在样式表中进行设定时,要按照 link visited hover active 的顺序声明 6.background的各种属性 Background-color background-image :url(“ ”) background-repeat background-position background-attachment background的连写不要求按照顺序 这里特别注意的是关于background-position 的 如果只有一个数字的 第一个代表水平方向 纵坐标将默认为50 如果有第二个数字代表垂直方向 7.行高 7.1认识行高 一般浏览器默认的行高是18px 行高=字体高度+上间距+下间距 7.2 行高对间距的影响 一般行高的高度单位有 单位 单位对行高的影响 px 设置多少就是多少 em 行高=字体大小x行高值 % 行高=字体大小x行高值 无 行高=字体大小x行高值 给父盒子设定行高 单位 父盒子对子盒子的影响 px 子盒子的行高等于父盒子的行高 em 子盒子的行高=父x行高值 % 子盒子的行高=父x行高值 无 子盒子的行高=子(默认)x行高值 8.关于盒子的认识 9.border的属性及连写 样式 属性 Border border-color border-size border-style Border的连写与background的连写一样没有顺序的要求 注意的一点是 border:0 none;是去掉边框效果 补充几个属性 1.Text-decoration 决定文字链接是否有下画线 2.两个值 分别为 none;underline; Outline-style 控制表单控件的轮廓线 其值与 border的值是一样的,去掉轮廓效果的值为none; 10.padding的属性 Padding只有一个大小的属性 但是要记住当去不同个的值得时候 padding 代表含义 1个 上右下左都是都为一个值 2个 1st上下 2nd右左 3个 1st上 2nd右左3rd 下 4个 分别依次代表上右下左 关于padding与border的计算 要理解的是padding 作为一个盒子的属性和宽高差不过 ,因此会影响盒子的大小,如果要保持原来的盒子大小不变,当在水平或者垂直的方向上移动了多少的时候,这时候盒子的大小会增大,因此会在水平或者垂直的方向上增加,因此移多少,original盒子减多少。 盒子真正的大小(宽度)=original盒子宽度+左右边框+左右padding. 补充知识点 子盒子继承父盒子的宽度,给子盒子设置padding值的时候一般不会影响子盒子的大小(padding值不超过父盒子的宽度) 11.Margin Margin的两个特点: 1.垂直合并:以外边距大的为准; 2.包含合并问题: 父盒子包含子盒子的时候给子盒子设置margin-top的时候 这回收会出现父盒子和子盒子一起往下移动。 解决办法:1.给父盒子设置一个边框 2给父盒子设置一个overflow的属性值为hidden
1229 今天休一天, 无聊 打打字 ,复复习 关于今天的总结: 1.复习之前的html 知识已经昨天学到关于的CSS的知识 2.关于打字速度的一些小心得 1) 今天做了一个 类考研成绩查询的页面 一个页面 作为查询窗口 第二页面来收集 考生个人信息 第三个页面则显示考试成绩 1.主要回顾了 html 基础结构 包括 <doctype! html> <html> <head> <title></title> <meta charset="utf-8"> <meta name="keyword/description" content=""> </head> <body></body> </html> 而我关于这一部分的知识不熟悉的地方是 meta是单标签 name 目前学的 值有 keyword /description 2.查询窗口 我主要运用到了昨天老师讲解的CSS的各类选器 包括 标签选择器 类选择器 还有复合选择器中的 标签指定选择器 以及 后代选择器 还有 并集选择器 复合选择器中的 一点一空 一逗 就目前来看还不是很熟练 标签指点是 一点 后代选择器是 一空 并集选择器是 一逗 3.第二页信息采集页面中 主要的问题存在于将HTML中的部分知识遗忘和记混 以及漏写 <form> <filedset><legend>名称</legend><fieldset> </form> 关于复选的表单控件 记混 应当是<input type="checkbox" checked="checked"> 与下拉框控件<select></select>剂混淆 而且记不清<select></select>中的子标签应当是<option></option> 当然也不要遗忘<optgroup label=""> 写的过程中也犯了 将 < select> 写成了<selected> 直接导致了效果读不出来 4.在考生成绩单 这个页面 这中我主要复习了细线表格的制作 以及制作表格的知识点 以及回顾了相关的属性 <table width="" height="" border=" " cellpadding ="" cellspacing=" " bgcolor=""> 细线表格的是将 border设为默认值 bgcolor ="black" 下面的<tr></tr>中bgcolor="white" <caption></caption> <tr> (这一部分也记得不是很清楚了) <th></th> </tr> <tr> <td></td> </tr> </table> 2)打字怎么说呢 现在对键盘的布局已经记住了 但是快速反应能力与协调还不是很好 但是现在的速度 已经以前盲打的每分钟60个字左右 已经变成了 每分钟90个左右 但是精确性还不是很好 主要几种在以下几个字母的输入 I O P H Z X Y U 还有一些特殊字符记得不是很清楚 总之情况相对之前已经有了很大的改观 自己真棒(好违心~~) 键盘的右上角分布着 Y U I O P 手放在键盘上的位置 对于能否打出相应的字母至关重要。 左下角 分布着 Z X C 手放下来打好之后记得返回原来 F的位置 今天余下的时间看一看老师的笔记
CSS 第一天所学,晚间回顾 谈谈今天学到的东西 今天是学习CSS的第一天 关于今天学习的东西 总体上 会用 但是不能形成 知识的框架希望通过回顾来巩固所学知识 以便形成完整的知识框架。 首先是 CSS的定义 英文是 Cascading style sheets 中问解释是 层叠样式表格 css与html 的关系 css 是以html 为基础的 css 的语法 语法 <style>`选择器{属性:值;}</style> 这里面的; : 都必须是英文格式下的 常用的一些属性 color backgroud-color font-size font-style font-weight font-family text-align font的联用 font: font-style font-weight font-size/lineheight font-family 需要注意的是1.font-size 与 font-family必须赋值 2.必须按照顺序 依次 赋值 几种不同的选择器 1.标签选择器 格式 标签{属性:值;} 2.类选择器 格式 .类名{属性:值;} 由于类选择器灰常重要 我们需要注意的 它的特点: 1.一个类名可以对应多个标签 2.谁调用谁改变样式 命名的规范: 1.不能用纯数字来命名,也不能以数字开头来命名类 2.不推荐也不能用汉字来命名 类 3.不推荐用标签名来命名类 4.不能用特殊字符来命名,也不能用特殊字符来命名类 5.推荐使用有意义的单词来命名类 推荐文本语义化 一些用法 提取公共类 3.ID选择器 语法#id的名称{属性:值;} 在其他的地方 定义id属性 标签不能调用多个ID选择器定义的样式 在后面学习JS 想关联 4.通配符选择器 *{属性:值;} 一般情况下 做页面的初始化的样式 复合选择器 (一逗一空一点) 1.标签指定浏览器(一点) p.layout{text-align:center} 2.后代选择器(一空) 后代选择器 标签(类名)与标签之间一定是嵌套关系 如 div p {属性:值;} 或者 .layout .nav{属性:值;} 3.并集选择器(一逗) 如 div,p{属性:值;} 并集选择器 *
DAY2,在传智播客的第二天,正式上课 传智播客上课的第二天,正式开始了课堂知识的学习,主要学习了网页的相关基础知识,重点学习了HTML的知识。包括 1.HTML的含义 hyper text markup language超文本标记语言 2.html5的结构 <!doctype html> 告诉浏览器当前文本类型 <html> 根标签 <head> 头部 <title></title> 网页名词 </head> <body> 网页主题 </body> </html> 3.html的标签 单标签 <base> <!doctype html> <hr><!--画一条横线--> <br><!--间隔一行--> <img src=""" alt="" title="" width="" height=""> 双标签 <hn></hn> n在1到6之间取值 n越大字体越小 标题标签 <a href=""></a> 超链接 标签 <p></p> 段落标签 <strong></strong> 字体加粗标签 <em></em>斜体字标签 <ins></ins>下划线标签 <font></font>字体标签 <del></del> 几种链接 超文本链接 <a href="http//:http://tieba.baidu.com/mo/q/checkurl?url=http%3A%2F%2Fwww.baidu.com&urlrefer=d04a537000146ae20785a6d0d3533551">百度</a> 一个属性 <a href="http//:http://tieba.baidu.com/mo/q/checkurl?url=http%3A%2F%2Fwww.baidu.com&urlrefer=d04a537000146ae20785a6d0d3533551" target="_blank">百度</a> 或者直接在<head><base target="_blank"</head> 锚链接 <a href="#nihao">真棒啊</a> <p>sdansnfian</p> <p id="nihao">wozaizheli</p> 实现简单的下载功能 注意相对路径的问题 夫妻的分分和和 特殊的符号 < 小于号 &lt; > 大于号 &gt; 空格号 &nbsp; 列表 无序列表 <ul> <li><li> </ul> 有序列表 <ol> <li><li> </ol> 自定义列表 <dl> <dt> <dd></dd> </dt> </dl> 额外需要注意的是相对路径的问题 这就是今天学习的一定东东,是在实际操作中还是有点头晕,还是需要熟练运用,重要的代码,要敲3遍以上。
1 下一页