web前端基础复习_day04_CSS

CSS

一. 概述

1. 概念

• Cascading Style Sheets 层叠样式表;
• 层叠: 多个样式可以作用在同一个html的元素上，同时生效

2. 作用

• 从审美的角度, 对HTML进行美化;
• 将内容展示和样式控制分离
  • 降低耦合度。解耦
  • 让分工协作更容易
  • 提高开发效率

3. 书写规范

语法: 选择器 {属性: 值; 属性: 值; ...}
示例: h1 {color: red; font-size: 16px;}

• CSS 由代码选择器和{ } 组成;
• 大括号里面由一条一条的声明组成;
• 每一条声明后都要有一个英文的分号, 最后一个声明的末尾可以不加;
• 每一条声明都由属性和值组成;
• 声明中的值不需要加引号;
• 如果属性的值是数字, 必须要有单位.

二. 书写方式

1. 行内式

① 概念

• 将CSS代码直接嵌入到标签的style属性中

② 示例

<div style="color:red;">hello css</div>

2. 嵌入式

① 概念

• 将CSS代码直接嵌入到HTML文件的style标签中

② 示例

<style>
    div{
        color:blue;
    }
</style>

<div>hello css</div>

3. 外链式

① 概念

• 单独写一个以.css为扩展名的文件, 这个文件可以直接书写CSS代码.
• 需要将这个CSS文件引入到需要的HTML文件中,
• 通过HTML中的<link> 标签来引入

② 示例

<link rel="stylesheet" type="text/css" href="css/a.css">

三. 选择器

1. 基础选择器

① 通用选择器 *: 匹配HTML中所有标签
② 标签选择器 标签名: 匹配对应的HTML标签
③ 类选择器 .class属性值: 匹配到拥有相同class属性值的标签
④ id选择器: #id属性值: 匹配到具体的id属性值的元素.建议在一个html页面中id值唯一

* {
    margin: 0;
    padding: 0;
}
div {
    font-size: 16px;
}
.div2 {
    color: pink;
}
#div2 {
    border: 1px solid #eeeeee;
}

2. 选择器扩展

① 属性选择器

• E[attr]: 查找指定的拥有attr属性的E标签;
• E[attr = value]: 查找指定的拥有attr属性, 并且属性值为value的E标签;
• E[attr *= value]: 查找指定的拥有attr属性,并且属性值包含value的E标签;
• E[attr ^= value]: 查找指定的拥有attr属性,并且属性值以value开头的E标签;
• E[attr $= value]: 查找指定的拥有attr属性,并且属性值以value结束的E标签;

input[style]
{
  width:150px;
  display:block;
}

input[type="text"]
{
  width:150px;
  display:block;
}

input[title *="active"]
{
  width:120px;
  margin-left:35px;
}

② 伪类选择器

• 锚伪类

  • a:link {color: #FF0000} /* 未访问的链接 */
  • a:visited {color: #00FF00} /* 已访问的链接 */
  • a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
  • a:active {color: #0000FF} /* 选定的链接 */

• 相对于父元素的伪类

  • E:first-child: 选择属于父元素的第一个子元素的每个 E 元素。
  • E:last-child: 选择属于其父元素最后一个子元素每个 E 元素。
  • E:nth-child(n): 选择属于其父元素的第n个子元素的每个 E 元素。
  • E:first-of-type: 选择属于其父元素的首个 E 元素的每个 E 元素。
  • E:last-of-type: 选择属于其父元素的最后 E 元素的每个 E 元素。
  • E:nth-of-type(n): 选择属于其父元素第n个 E 元素的每个 E 元素。

③ 伪元素选择器

• before 选择器
  • E:before: 选择器在被选元素的内容前面插入内容。
  • 请使用 content 属性来指定要插入的内容。

p:before { 
	content:"台词：-";
	background-color:yellow;
	color:red;
	font-weight:bold;
}

• after选择器
  • E:after: 选择器在被选元素的内容后面插入内容。
  • 请使用 content 属性来指定要插入的内容。

p:after{ 
	content:"台词：-";
	background-color:yellow;
	color:red;
	font-weight:bold;
}

④ 复合选择器

• selector1, selector2, selector3 …{} 同时设置多个选择器选择的元素的样式

p, div{ 
	color: yellow;
}

⑤ 后代选择器
selector1 selector2 {} 选择selector1中的所有selector2元素;

<style>
	h1 em {color:red;}
</style>
<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>

⑥ 子元素选择器
selector1 > selector2 {} 选择selector1中的直接子 selector2元素;

<style>
	h1 > strong {color:red;}
</style>
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>

⑦ 相邻兄弟选择器
selector1 + selector2: 可选择紧接在selector1元素后的selector2元素，且二者有相同父元素。

<style>
	h1 + p {margin-top:50px;}
</style>
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<p>This is a <em>important</em> heading</p>
<p>This is a <em>important</em> paragraph.</p>	

四. 常见的CSS属性

1. display

① 定义和用法

• 属性规定元素应该生成的框的类型。

② 可能的值:

• none 此元素不会被显示。
• block 此元素将显示为块级元素，此元素前后会带有换行符。
• inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
• inline-block 行内块元素。

2. 尺寸属性

① width 设置元素的宽度。
② height 设置元素的高度。

• 可能的值:
  • auto 默认值。浏览器可计算出实际的宽度。
  • length 使用 px、cm 等单位定义宽度。
  • % 定义基于包含块（父元素）宽度的百分比宽度。
  • inherit 规定应该从父元素继承 width 属性的值。

③ line-height 设置行高。

• 可能的值:
  • normal 默认。设置合理的行间距。
  • number 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
  • length 设置固定的行间距。
  • % 基于当前字体尺寸的百分比行间距。
  • inherit 规定应该从父元素继承 line-height 属性的值

④ max-height 设置元素的最大高度。
⑤ max-width 设置元素的最大宽度。
⑥ min-height 设置元素的最小高度。
⑦ min-width 设置元素的最小宽度。

• 可能的值
  • none 默认。定义对元素被允许的最大高度没有限制。
  • length 定义元素的最大高度值。
  • % 定义基于包含它的块级对象的百分比最大高度。
  • inherit 规定应该从父元素继承 max-height 属性的值。

3. 文本属性

① color 属性规定文本的颜色。
② line-height 设置行高。
③ text-align 对齐元素中的文本。

• 可能的值
  • left 把文本排列到左边。默认值：由浏览器决定。
  • right 把文本排列到右边。
  • center 把文本排列到中间。
  • justify 实现两端对齐文本效果。
  • inherit 规定应该从父元素继承 text-align 属性的值。

④ text-indent 缩进元素中文本的首行。
⑤ text-decoration 向文本添加修饰。

• 可能的值
  • none 默认。定义标准的文本。
  • underline 定义文本下的一条线。
  • overline 定义文本上的一条线。
  • inherit 规定应该从父元素继承 text-decoration 属性的值。

⑥ text-transform 控制元素中的字母。

• 可能的值:
  • none 默认。定义带有小写字母和大写字母的标准的文本。
  • capitalize 文本中的每个单词以大写字母开头。
  • uppercase 定义仅有大写字母。
  • lowercase 定义无大写字母，仅有小写字母。
  • inherit 规定应该从父元素继承 text-transform 属性的值。

4. 字体属性

① font 简写属性。作用是把所有针对字体的属性设置在一个声明中。

p.ex2 {
	font:italic bold 12px/20px arial,sans-serif;
}

② font-family 设置字体系列。

p {
	font-family:"Times New Roman",Georgia,Serif;
}

③ font-size 设置字体的尺寸。

h2 {font-size:20px;}
p {font-size:100%}

④ font-style 设置字体风格。

p.normal {font-style:normal;}
p.italic {font-style:italic;}/**斜体的字体样式。**/
p.oblique {font-style:oblique;}/**斜体的字体样式。**/

⑤ font-weight 设置字体的粗细。

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}