码迷,mamicode.com
首页 > Web开发 > 详细

真正零基础学习HTML(三)

时间:2018-05-19 11:09:33      阅读:162      评论:0      收藏:0      [点我收藏+]

标签:html;css

```一、CSS概念 1、需求: 设置网页标签的样式:宽``、高、背景颜色、位置...... 用于布局或美化网页 2、概念: css 层叠样式表 英文全称:cascading style sheets 浏览器解释语言:让浏览器去执行解释的语言 html css 大小写不敏感:小写 w3c组织 3、css语法: 选择器1{ 属性名1:属性值1; 属性名2:属性值2; ... ... } 选择器2{ 属性名1:属性值1: 属性名2:属性值2; ... ... } 选择器:我要找的html标签(元素) 属性1:属性值1:width:20px 不针对行内样式 4、css注释 html注释 <!--注释内容 --> css注释 /*注释内容*/ //也可以 sublime快捷键:ctrl+/ 5、补充 dhtml=html(指定元素)+css(元素大小位置颜色)+javascript(操纵网页元素) <div>内容</div>独占一行,背景颜色一行 <span>内容</span>不独占一行,背景颜色跟随内容 <SPAN>是行级容器标签,不可以包含图片、标题、段落等,只能包含文字内容 (他们存在就是为了样式) 二、css样式分类 1、行内样式 只作用于行内 <p style="属性名:属性值;属性名:属性值;">内容</p> 2、内嵌样式 作用于本页也可以链接到html中 <HEAD> <STYLE type="text/css"> P { /*设置样式:字体和背景色*/ font-family: System; font-size: 18px; color: #3333CC; } H2 { background-color: #CCFF33; text-align: center; } </STYLE> </HEAD> <BODY> <H2.>品种特征方面:</.H2> <P>   1、蛋鱼:蛋鱼…….。</P> <P>   2、龙睛:龙睛……..。</P> <P>   3、高头:高头….。</P> 3、外部样式 作用于多个页面 引入内嵌样式css文件 <head> link <link rel="stylesheet" type="text/css" href=".css文件"> </head> 三、选择器 1、html选择器 <.style type="txet/css"> p{属性名:属性值; 属性名:属性值;} <.style/> 2、class类选择器 <.p class="命名">内容</p> <.STYLE type="text/css"> .命名{ 属性名:属性值; 属性名:属性值; } 3、ID选择器 <.p id="命名">内容</p> <.STYLE type="text/css"> #命名{ 属性名:属性值; 属性名:属性值; } 4、子元素选择器(父子关系) .div > .input > 选择器1 > 选择器2{ } .border:5px dotted red; .dotted:虚线 .solid:实线 5、后代选择器(后代关系) .div .input{ } 6、组合选择器 选择器,选择器{ 属性名:属性值; 属性名:属性值; } 7、样式混用 行内样式 内嵌样式 外部样式 就近原则

真正零基础学习HTML(三)

标签:html;css

原文地址:http://blog.51cto.com/13162615/2118105

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!