7.8 css 学习

7.8 css 学习
1.css 学习
i) 学习目的 : 为了把样式和内容剥离, 打包更好的处理样式
ii) 范例 :

<style>td{background-color:green;}
</style><table border="1"><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr>
</table>

id 选择器 (保证唯一性)
i) 范例

<style>
#tdx {color: green;
}#td1 {color: blue;
}#td2 {color: red;
}
#td3 {color: black;
}
</style><table border="1"><tr><td id="tdx'">1</td><td id="td1">2</td></tr><tr><td id="td2">3</td><td id="td3">4</td></tr>
</table>

类选择器 (多个格式用同一个样式的时候使用)
i) 范例

<style>
.han1{color : red;
}
.han2{color : blue;
}
# td1{color : green;
}
</style><table border="1"><tr><td class="han1">1</td><td id="td1">2</td></tr><tr><td class="han2">3</td><td class="han2">4</td></tr>
</table>

注释
i) 范例

<style>
/* css中的注释可以使用这种 */
.han1{color : red;
}
.han2{color : blue;
}
# td1{color : green;
}
</style>

尺寸(宽和高)
范例

<style>
/* css中的注释可以使用这种 */
/* 这里的100% 和 30% 是以屏幕为准的, 是屏幕的100%或者30%*/
.div1{width : 100%;height : 30%;background-color : green;
}
.div2{width : 50%;height : 20%;background-color : yellow;
}
</style><div class="div1">han
</div>
<br>-----------<br>
<div class="div2">han
</div>

背景
i) 常用的属性
a) background-color
颜色支持 :
– red, green
– rgb(250,0,250)
–#FFFFFF
b) background-image:url(imagepath)
c) url(ground.jpg)
d) background-repeat
e) background-size:contain

范例 :

han

```

文本属性
i) 范例

<style>
.div {color : red /*文字颜色*/text-align : center /*文字对齐, left right center*/text-decoration : overline     /*文本修饰*/line-height :  18px;    /*行间距*/letter-spacing : 0px;  /*字符间距*/word-spacing : 0px ; /*单词间距*/text-indent : 10px ; /*首行缩进*/text-transform : none ; /* 文字的大小写, none默认大小写, 还有一些其他的,capitalize全大写等等*/
}
</style>
<div class="div">han han<br> hanx</div>

css字体
i) 范例

<style>
.div {color : red /*文字颜色*/text-align : center /*文字对齐, left right center*/text-decoration : overline     /*文本修饰*/line-height :  18px;    /*行间距*/letter-spacing : 0px;  /*字符间距*/word-spacing : 0px ; /*单词间距*/text-indent : 10px ; /*首行缩进*/text-transform : none ; /* 文字的大小写, none默认大小写, 还有一些其他的,capitalize全大写等等*//*以下是字体颜色*/font-size : 20px  /* 有两种 : px或者%*/font-style : normal /* 字体风格, normal 标准字体, italic斜体*/font-weight : normal /* 字体粗细, normal与bold */font-family : "times" /* 字体库 */
}
</style>
<div class="div">han han<br> hanx</div>

css表格 & 边框
i) table-layout属性
a) table-layout : automatic (单元格的大小由td的内容宽度决定) 或者fixed: 单元格的大小由td上设置的宽度所决定.
b) table-layout : fixed (单元格的大小由td上设置的宽度所决定).
ii) border-collapse 属性
a) border-collapse : separate 边框分隔
b) border-collapse : collapse 边框合并
范例

<style>/*1) border-style : 边框风格2) border-color : 边框颜色3) border-width : 边框宽度4) border : 都放在一起5) border-top : 只有一个方向有边框note : 块元素的宽度默认是100% (div, p, h1)note : 内联元素的宽度是由其内容所决定的 (a, strong, i, input)*/}
</style>
<table class="t1" border="1" width="50%"><tr><td width="10%">han1</td><td width="10%">han2</td></tr><tr><td width="10%">han3</td><td width="10%">han4</td></tr></table>

7.8 css 学习相关推荐

CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法
CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法参考文章: (1)CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法 (2)https://www.cnblogs. ...
前端篇--------1.css学习笔记
1.css 单行文本换行溢出解决方案(css三件套) white-space:nowrap overflow:hidden text-overflow:ellipsis 2.css m ...
HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
HTML/CSS学习笔记02【表单标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
HTML/CSS学习笔记01【概念介绍、基本标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
CSS学习笔记 display属性
CSS学习笔记05 display属性 HTML标记一般分为块标记和行内标记两种类型,它们也称块元素和行内元素. 块元素每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属性, ...
11个实用的CSS学习工具
为什么80%的码农都做不了架构师?>>> 1. 盒子模型的幻灯片通过3D转换效果产生的互动的幻灯片.按向左或向右箭头键切换,全屏观看会有更好的效果. 2. CSS Diner ...
CSS学习笔记-04 a标签-导航练习
个人练习,各位大神勿笑 .. <!DOCTYPE html> <html lang="en"> <head><meta charset= ...
CSS学习之外边距合并
外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距. 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 外边距合并外边距合并(叠加)是一个相当简单的概念.但是,在实践中对网 ...
div+css学习笔记一（转）
div+css学习笔记一 (2011-05-12 07:32:08) 标签: div css 居中背景图片 ie6 ie7 margin 杂谈分类: 网页制作 1.IE6中用了float之后导致m ...

7.8 css 学习

7.8 css 学习相关推荐

最新文章

热门文章