CSS入门——第一章
1.三种书写位置
- 行内样式表：一行标签之内，直接书写在标签的style属性里。
- 内嵌样式表：写在
<head>的<style>下，然后通过选择器选取要作用的标签。 - 外联样式表：将内容写在一个外部样式表中（.css）用
<link href=“XXX.css” type=“text/css” rel=“stylesheet”/>
2.文本样式
- 文本对齐 text-align
- 字间隔 word-spacing
- 缩进文本 text-indent
- 字符转换 text-transform
- 文本装饰 text-decoration
- 字体设置 font-family
- 字体风格 font-style
- 字体加粗 font-weight
- 字体大小 font-size
- 文字颜色 color
- 文字行高 line-height
3 基础选择器
- 标签选择器，如：
p{color:red;}（选择元素名） - 类选择器，如：
.name{color:black;}（.+class名） - ID选择器 ,如：
#name{color:blue;}（#号+ID名） - 通配符选择器，如：
* {color：green}（选择全部元素）
4 复合选择器
- 后代选择器，如：section span{color:blue;}
- 子元素选择器，如：p>span{color:red;}
- 交集选择器，如，h1+h2{color:green;}
- 并集选择器，如，p,h1,span{color:red;}
- 链接伪类选择器 ： 书写顺序：
1、link和visited必须放在最前面（无先后顺序,静态伪类选择器）2、link和visited只能用于a标签 3、link和visited后面是focus 4、focus后面是hover 5、hover后面是active
5 标签的显示模式
块级元素：
块级元素，顾名思义，该元素呈现“块”状，所以它有自己的宽度和高度，也就是可以自定义width和height，除此之外，块级元素比较霸道，它独自占据一行高度（float浮动除外），一般可以作为其他容器使用，可容纳块级元素和行内元素。
- 每个块级元素都是独自占一行。
- 元素的高度、宽度、行高和边距都是可以设置的。
- 元素的宽度如果不设置的话，默认为父元素的宽度（父元素宽度100%）。
常见块级元素
<div> //定义文档中的分区或节
<form> //创建 HTML 表单
<h1> //定义最大的标题
<hr> //创建一条水平线
<li> //标签定义列表项目
<ol> //定义有序列表
<ul> //定义无序列表
<p> //标签定义段落
<table> //标签定义 HTML 表格
行内元素：
行内元素不可以设置宽（width）和高（height），但可以与其他行内元素位于同一行，行内元素内一般不可以包含块级元素。行内元素的高度一般由元素内部的字体大小决定，宽度由内容的长度控制。
- 每一个行内元素可以和别的行内元素共享一行，相邻的行内元素会排列在同一行里，直到一行排不下了，才会换行。
- 行内元素的高度、宽度、行高及顶部和底部边距不可设置。
- 元素的宽度就是它包含的文字或图片的宽度，不可改变。
常见行内元素
<a> //标签可定义锚
<b> //字体加粗
<br> //换行
<em> //定义为强调的内容
<i> //斜体文本效果
<img> //向网页中嵌入一幅图像
<input> //输入框
<label> //标签为 input 元素定义标注（标记）
<select> // 创建单选或多选菜单
<span> //组合文档中的行内元素
<strong> //加粗
<var> // 定义变量
行内块元素：
行内块级元素，它既具有块级元素的特点，也有行内元素的特点，它可以自由设置元素宽度和高度，也可以在一行中放置多个行内块级元素。比如input、img就是行内块级元素，它可以设置高宽以及一行多个。
- 和其他行内或行内块级元素元素放置在同一行上；
- 元素的高度、宽度、行高以及顶和底边距都可设置。
元素类型转换display
- display：block ，定义元素为块级元素
- display : inline ，定义元素为行内元素
- display：inline-block，定义元素为行内块级元素。
小结：
- 块级元素会独占一行，而内联元素和内联块元素则会在一行内显示。
- 块级元素和内联块元素可以设置 width、height 属性，而内联元素设置无效。
- 块级元素的 width 默认为 100%，而内联元素则是根据其自身的内容或子元素来决定其宽度。
232
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
