Android程序员搞Web之CSS（三） Android程序员搞Web之CSS（三）

Android程序猿搞Web 之HTML（二）
1、行内样式

数字整理表格数字整理小数字 123 中数字 456 大数字 789

数字整理表格
数字整理
小数字	123
中数字	456
大数字	789

在标签内输入 style 并在 style 引号内输入样式
css用“ : ”

文章图片
样图 2、内部样式表
在 head 标签内通过 style 标签与选择器配合修改样式

Document - 锐客网/*选择器{属性值}*/ th{ color: blue } td{ font-size: 14px }tr{ height: 40px } 数字整理表格数字整理小数字 123 中数字 456 大数字 789

数字整理表格
数字整理
小数字	123
中数字	456
大数字	789

文章图片
样图 3、外部样式
1）、创建 css 文件夹用于存 css 文件
2）、css 文件内输入选择器{}进行样式修改
3）、在html文件内使用link标签进行 html 与 css 文件的关联操作

Document - 锐客网数字整理表格数字整理小数字 123 中数字 456 大数字 789

数字整理表格
数字整理
小数字	123
中数字	456
大数字	789

/*css文件内代码*/ th{ color: #889900 } td{ color: #aa3344 }

文章图片
样图 4、类选择器
上面点声明，下面class调用
在 style 内 .suibian(随便命名) { 属性以及属性值}
在标签内 class=“suibian” class内引入即可

Document - 锐客网.last{ color: blue } 我是类选择器我是类选择器我是类选择器

文章图片
样图 5、练习

Document - 锐客网span{ font-size: 100px } .G{ color: #0E8CE8 } .o1{ color: #E21918 } .o2{ color: #FFCD41 } .g{ color: #0188FB } .l{ color: #7FB546 } .e{ color: #B83E1F}G o o g l e

文章图片
样图 6、多类选择器
1）、可以定义多个样式，在class内同时赋值给我一个标签
2）、当不同的style内，存在相同的属性时，标签的样式为，样式最下面的定义样式。
7、id选择器

Document - 锐客网span{ font-size: 100px } #G{ color: #0E8CE8 } #o1{ color: #E21918 } #o2{ color: #FFCD41 } #g{ color: #0188FB } #l{ color: #7FB546 } #e{ color: #B83E1F}G o o g l e

文章图片
样图 1）、相当于将style内部的 “.类名” 改成“#id名称” 2）、将标签内的 class 改为 id。注意：class 内的值可以多次使用；id 内的值只能使用一次，全局一次。 8、通配符选择器

Document - 锐客网*{ color: red } 我是小狗我是小猫我爱汪汪汪我爱喵喵

将下面所有标签全选

文章图片
样图 9、css属性
1）、font-size：字号大小单位：px：像素
2）、font-family ：字体 3）、font-weight: 字体加粗参数为：bold 或者700 normal 或者 400：去掉加粗
4）、font-style 字体风格参数：normal 正常字体；italic 倾斜的
5）、字体连写 font后面设置各种参数，但是有序的。
font： font-style（风格）、font-weight（是否加粗）、font-size（字体大小）\line-height（行高）、font-family（字体）
6）、行间距 line-height ：设置行与行之间的距离
7）、文本水平对齐方式 text-align: center（居中）、left（左对齐）、right（右对齐）
8）、设置缩进 text-indent：单位为：em
9）、文本修饰 text-decoration ：none 默认的，可以取消删除线
underline 下划线
overline：文本上面的先
line-through：穿过文本的线
10、符合选择器
1）、后代选择器

Document - 锐客网div p{ color: #669900 } 王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀小米枪战小米枪战小米枪战王者荣耀王者荣耀

文章图片
样图先写外层的，中间用空格分割，再写内层的。
外层标签class，内层class名称标签

Document - 锐客网div p{ color: #669900 }.xiaomi p{ color: #AE81FF } 王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀王者荣耀小米枪战小米枪战小米枪战王者荣耀王者荣耀

文章图片
样图

div p > a

表示子代选择器，直系、不包含孙子。
2）、交集选择器

Document - 锐客网div.green{ color: green; } 小米超神小米超神小米超神王者荣耀王者荣耀王者荣耀

文章图片
样图
相同的类选择器，名称前面加标签即可，选谁谁有变化。
4）、并集选择器

Document - 锐客网div,p,span,a{ color: #998877 }小米超神王者荣耀小米枪战麻花藤

文章图片
样图
多个标签具有相同样式时，可以用“，”进行分割，实现多个选择器一起更改属性。
5）、伪类选择器链接伪类选择器： :link 表示未访问的链接
:visited 表示已经访问的链接
:hover 表示鼠标移动的链接
:active 表示选定的链接
连用时顺序不可颠倒 11、显示模式
1）、块级元素——块级显示模式一种元素占一行，并且可以设置宽度、高度、对齐等属性；
例子

address – 地址 blockquote – 块引用 center – 举中对齐块 dir – 目录列表 div – 常用块级容易，也是CSS layout的主要标签 dl – 定义列表 fieldset – form控制组 form – 交互表单 h1 – 大标题 h2 – 副标题 h3 – 3级标题 h4 – 4级标题 h5 – 5级标题 h6 – 6级标题 hr – 水平分隔线 isindex – input prompt menu – 菜单列表 noframes – frames可选内容，（对于不支持frame的浏览器显示此区块内容 noscript – 可选脚本内容（对于不支持script的浏览器显示此内容） ol – 有序表单 p – 段落 pre – 格式化文本 table – 表格 ul – 无序列表

2）、行内元素——行显示模式和邻近元素在一行；
宽高无效，但是水平方向的padding和margin可以设置，垂直方向无效；
默认宽度就是本身宽度；
行内元素只能容纳文本或者是其他的行内元素。
3）、行内块元素——行内块显示模式例子：

a – 锚点 abbr – 缩写 acronym – 首字 b – 粗体(不推荐) bdo – bidi override big – 大字体 br – 换行 cite – 引用 code – 计算机代码(在引用源码的时候需要) dfn – 定义字段 em – 强调 font – 字体设定(不推荐) i – 斜体 img – 图片 input – 输入框 kbd – 定义键盘文本 label – 表格标签 q – 短引用 s – 中划线(不推荐) samp – 定义范例计算机代码 select – 项目选择 small – 小字体文本 span – 常用内联容器，定义文本内区块 strike – 中划线 strong – 粗体强调 sub – 下标 sup – 上标 textarea – 多行文本输入框 tt – 电传文本 u – 下划线

既可以设置宽高又可以在同一行内放置多个元素；
行与快的区别

区别一：块级：块级元素会独占一行，默认情况下宽度自动填满其父元素宽度行内：行内元素不会独占一行，相邻的行内元素会排在同一行。其宽度随内容的变化而变化。区别二：块级：块级元素可以设置宽高行内：行内元素不可以设置宽高区别三：块级：块级元素可以设置margin，padding 行内：行内元素水平方向的margin-left; margin-right; padding-left; padding-right; 可以生效。但是竖直方向的margin-bottom; margin-top; padding-top; padding-bottom; 却不能生效。区别四：块级：display:block; 行内：display:inline; 可以通过修改display属性来切换块级元素和行内元素

4）、三种显示模式相互转换在相应的style内设置display属性。当块级标签转换为行标签时值为inline；行级元素转换为块级元素是参数值为block；块、行级元素转换为行内块参数为inline-block;
综合练习：

Document - 锐客网.nav{ /*行内元素行内块元素可以当做文本*/ text-align: center; }.nav a{ width: 120px; height: 50px; background-image: url(images/bg.png); display: inline-block; text-align: center; text-decoration: none; color: #ffffff; /*行高等于盒子的高度可以使一行文本居中*/ line-height:50px; } .nav a：hover{ background-image: url(images/bgc.png); }网络导航网络导航网络导航网络导航网络导航