【自用】HTML CSS相关学习小结 171218

HTML是HyperText Markup Language的简写，它是一种超文本标记语言。

它可以 用来 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

--------------------------------------------------------------

html标签

有语义标签

h1-h6 标题<h1>这是一个标题<h1/>

p 段落<p>这是一个段落<p/>
img 图片 <img src="/123.jpg" width="123"   height="211" />
a 超链接和锚点   <a href="http://www.baidu.com">这是一个链接</a>
ul 无序列表
ol 有序列表
table 表格

无语义标签：div、span div是一个块级元素，它可以把文档分割为不同、独立的部分

-------------------------------------------------------------------------------------------------------------------------------------------------------------------

CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。

常用背景控制
background-color 颜色
background-image 图片
background-repeat 图片平铺
background-attachment 滚动
background-position 图像在背景中的位置

常用文字属性
font-family:字体名称
font-size:字体大小
font-style:字形（斜体等）
font-weight:字体粗细
可以简写，书写顺序：
font-size，font-variant，font-weight，font-size，font-family
（前三个可缺省，使用默认值，后两个必须指定值）这种书写方式更加简洁
文本相关属性：
文本相关属性主要包括颜色，对齐方式，修饰效果等。
color：设置文本颜色
none：默认值，没有装饰效果
underline：加下划线
overline：加上划线

line-through：加删除线

text-align：文本对齐方式
left 左对齐
right 右对齐
center 居中对齐

justify 两端对齐

vertical-align:文本垂直对齐方式
top  靠上对齐
bottom  靠下对齐
middle 垂直居中对齐
text-indent：文本缩进
letter-spacing：字符之间的艰巨
word-spacing：字间距
line-height：设置行高，实际上是调整行间距

--------------------------------------------------------------

用div盒子模式来布局

布局原则：从大到小、从上到下、从左到右
盒子模型：有宽（width）高（height），有边框（border）、有外边距（margin）、有内边距（padding）
浮动布局：div可以浮动起来（float）、也可以清除浮动（clear）
一般网页制作可以是先把区分好，在慢慢微调制作。

--------------------------------------------------------------

选择器

1.ID 选择器（ID selector，IS）：使用 # 标识selector，语法格式：#S{...}（S为选择器名）。例：id为name的标签会匹配下面的样式

<style>#name{  color:red;}</style><!--下面文字是红色的--><p id="name">red text</p>

2.类选择器（class selector，CS）：使用 . 标识selector，语法格式：.S{...}（S为选择器名）。例：class属性值为value的标签会匹配下面的样式

<style>.value{  text-align:center;}</style><!--下面的文字是居中对齐的--><p class="value">center text</p>

3.元素选择器（element selector，ES）：又叫标签选择器，使用标签名作为selector名，语法格式：S{...}（S为选择器名）。例：所有的p标签都会匹配以下的样式

<style>p{  font-style:italic;}</style><!--下面的文字是斜体的--><p style="font-style:italic">italic text</p>

4.包含选择器（package selector，PS）：指定目标选择器必须处在某个选择器对应的元素内部，语法格式：A B{...}（A、B为HTML元素/标签，表示对处于A中的B标签有效）。例：以下div内的p标签和div外的p标签分别匹配不同的样式

<style>p{  color:red;}div p{  color:yellow;}</style><p>red text</p><!--文字是红色的--><div>  <p>yellow text</p><!--文字是黄色的--></div>

5.子选择器（sub-selector，SS）：类似于PS，指定目标选择器必须处在某个选择器对应的元素内部，两者区别在于PS允许"子标签"甚至"孙子标签"及嵌套更深的标签匹配相应的样式，而SS强制指定目标选择器作为 包含选择器对应的标签 内部的标签，语法格式：A>B{...}（A、B为HTML元素/标签）。例：以下div内的p标签匹配样式，div内的table内的p不匹配

<style>div>p{  color:red;}</style><div>  <p>red text</p><!--文字是红色的-->  <table>    <tr>      <td>        <p>no red text;</p><!--文字是非红色的-->      </td>    </tr>  </table></div>

7.兄弟选择器（brother selector，BS）：BS是CSS3.0新增的一个选择器，语法格式：A~B{...}（A、B为HTML元素/标签，表示A标签匹配selector的A，B标签匹配selector的B时，B标签匹配样式）

<style>div~p{  color:red;}</style><div>  <br>no red text</p><!--文字是非红色的-->  <div>no red text</div>  <p>red text</p><!--文字是红色的--></div>