CSS

CSS

1. 叠层样式表，cascading style sheets
2. 用于定义HTML元素的显示形式，是一种格式化网页内容的技术

添加样式表的方式

1.内连式：直接在元素中接入style属性

《div style="border:1px solid #000; width:300px; height:200px">

2.嵌入式：书写style标签，在标签中指明样式。可以用于网页中不同元素

<styl>
    div{
        width:300px;
        height:200px
        background-color:yellow
        border:2px solid #000;
    }
</style>

3.外联式：将样式规则书写到文件中，可以用于不同的网页，重用度最好。

《link rel="stylesheet" href="abc.css">

层叠样式表的含义是：如果有多个规则来描述同一个元素，那么会根据元素样式表优先级来决定最终显示什么样式

对于导入CSS方式的优先级：内连式 > 嵌入式 > 外联式

CSS选择器

元素选择器div：利用元素的标记明称作用选择范围。 div{}表示所有div元素采用该样式。 h1，h2{}表示所有的h1标签和h2标签均采用该样式

类选择器 . ：利用元素的class属性来引入类选择器的样式。可以用于多种元素。同一种元素也可以选择性使用：

.mm{} <div class="mm"></div> 该div采用mm类选择器定义的样式

id选择器 #：让拥有该id属性的元素采用该样式。

<p id="p1">元素1</p>　　　　#p1{} id为p1的元素采用该样式。

包含选择器:元素内的子元素采用该样式。

<div id="mydiv"></div>  　　#mydiv span{}  id号为mydiv元素中所有span标签采用该样式。

div aaa{}  表示所有div中，class属性为aaa的元素均采用该样式

通配符 *：所有的元素均采用该样式

#oneDiv*{}表示id为oneDiv中，所有的元素均采用该样式

伪类选择器：执行完某个动作的元素采用该样式

#data tr:hover{}  表示鼠标悬停在id为data下的tr元素时，采用该样式。

颜色单位

• 使用0-255之间的整数来设置，如color：rgb（128,0,128）
• 使用十六进制数组定义颜色，如#fceab；
• 为颜色取名：aqua,black,blue,fuchsia,gray,green等。

字体

font-style 规定字体样式。参阅：font-style 中可能的值。 
font-variant 规定字体异体。参阅：font-variant 中可能的值。 
font-weight 规定字体粗细。参阅：font-weight 中可能的值。 
font-size/line-height 规定字体尺寸和行高。参阅：font-size 和 line-height 中可能的值。 
font-family 规定字体系列。参阅：font-family 中可能的值。 
caption 定义被标题控件（比如按钮、下拉列表等）使用的字体。 
icon 定义被图标标记使用的字体。 
menu 定义被下拉列表使用的字体。 
message-box 定义被对话框使用的字体。 
small-caption caption 字体的小型版本。 
status-bar 定义被窗口状态栏使用的字体。 

margin属性

• 水平盒子的间距为两个和字间距的和
• 垂直盒子的间距为两个盒子间距的较大值
• margin值可以设置为负值

padding属性

• Padding属性用来描述盒模型的边框和内容之间插入多少空间
• margin是当前元素和border的距离；padding是内容和border 的距离
• margin是对外的，padding是对内的
• margin只对块级元素有效。padding对所有元素都有效。

盒模型

在盒模型中，我们可以控制四个不同的分层属性：

• 内容（content）：元素中的内容
• 外边距（Margin）：代表元素外边的空间，这个控件将元素相互分开。
• 边框（Border）：位于元素的编剧内和元素的边框外之间的可配置的线。
• 内边距（Padding）：元素内容和元素边框之间的空间。

盒模型均可以用“上下左右”方式设置。如果仅给出两个或三个值，那么缺失边的属性值取与对边相同的值。

标准文档流

• 所谓标准流，就是指在不使用其他与排列和定位相关的特殊CSS规则式，各种元素的排列规则。
• 1 文本元素按照从上到下、从左到右的格式布局
• 2 块级元素按照从上到下依次排列
• 3 内嵌元素按照从左到右依次排列

display：none和visibility：hidden的区别

这两个样式都可以隐藏元素。
display：onne元素看不见，同事不占用位置。
visibility：hidden元素看不见，但是元素会占用位置。

内嵌元素和块级元素相互转换

内嵌元素——>块级元素：display:block

块级元素——>内嵌元素:float:left

选择器优先级：

!Important > id > class > 伪类 > *

内容超出容器

word-break:break-all：文字超出容器自动换行。
overflow:scroll——出现滚动条。
overflow:hidden——超出内容隐藏。