java基础-css

 

什么是CSS是层叠样式表（CascadingStyle Sheets ）的缩写，它用于定义html元素的显示形式，是一种格式化网页内容的技术

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

对于导入css方式的优先级：内联式>嵌入式，外联式 嵌入式和外联式按照书写顺序

添加样式表的方式：

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

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

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

<style>

div{

}

</style>

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

<linkrel="stylesheet" htrf="abc.css>

 

css选择器

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

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

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

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

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

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

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

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

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

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

伪类选择器:执行完某个都总的元素采用该样式

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

伪元素选择器：

 

CSS属性单位1

使用0-255  之间度整数值来设置，如color:rgb(128,0,128);

使用十六进制数组定义颜色，如#fc0eab

使用颜色名字：black,red,blue,green;gray

 

margin属性

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

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

margin值可以为负数

padding属性

用来描述盒模型的边框的内容之间插入多少空间

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

margin是对外的，padding是对内的

margin只有块级元素有效。padding对所有元素都有效

 

css盒模型，四个不同的分层属性

content ：元素中的内容

Margin:代表元素外边的空间，这个空间将元素相互分开。

Border:位于元素的边距内和元素的边框距外之间的可配置的线

padding(内边距)：元素内容和元素边框之间的空间

 

display:none和visibility:hidden的区别

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

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

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

 

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

内嵌元素---->块级元素  display:block

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

 

css优先级  

!important 优先级最高

div{

background-color:blue !important;

}

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