CSS基础


CSS基础

CSS是层叠样式表(Cascading Style Sheets)的缩写，它用于定义html元素的显示形式，是一种格式化网页内容的技术。

添加样式表的方式：

1、内联式：直接在元素中加入style属性，只能用于网页中的一个元素。

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

2、嵌入式：书写style标签，在标签中指明样式。可以用于网页中的不同元素。一般写在head里面，可以重用

    <style>

        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"></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元素时，采用该样式。

CSS属性单位

颜色单位：1、用百分比值来表示，如color：rgb（50%，0,50%）；

 2、使用0-255之间的整数值来设置，如color：rgb(128,0,128);

 3、使用十六进制数字定义颜色，如#fc0eab；

 4、使用简化的十六进制数定义颜色，如#080；

 5、为颜色取名：aqua，black，blue，fuchsia，gray，green等。

布局属性：

margin属性：

margin属性分为margin-top、margin-right、margin-left、margin-bottom、margin五个属性，分别表示盒模型里内容离边框的距离。

水平盒子的间距为两个盒子间距的和

垂直盒子的间距为两个盒子间距的较大值

margin值可以设置为负值

padding属性：

padding属性用来描述盒模型上的边框和内容之间插入多少空间，也分为五个。

margin和padding的区别：

margin是当前元素和border的距离，padding是内容和border的距离

margin是对外的，padding是对内的

margin只对块级元素有效，padding对所有元素有效

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

内容（content）：元素中的内容

外边距（margin）：代表元素外边的空间，这个空间将元素相互分开

边框（border）：位于元素的边距内和元素的边框距外之间的可配置的线

内边距（padding）：元素内容和元素边框之间的空间

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

标准文档流：

所谓标准文档流，就是指在不使用其他与排列和定位相关的特殊css规则时，各种元素的排列规则。

1、文本元素按照从上到下、从左到右的格式布局

2、块级元素按照从上到下一次排列

3、内嵌元素按照从左到右一次排列

display：none和visibility：hidden的区别

这两个样式都可以隐藏元素。

display：none元素看不见，同时元素不占用位置。

visibility：hidden元素看不见，但元素会占用位置。

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

内嵌元素-----》块级元素   display：block

块级元素-----》内嵌元素   float：left

css优先级

选择器优先级：！important > id > class > element > 伪类 > *

内容超出容器

overflow：scroll  出现滚动条

overflow：hidden  超出内容隐藏

word-break：break-all；文字超出容器自动换行

list-style-type:none;   去掉标记