课堂笔记 - Oarcle - 08 - JavaWed

CSS作用：定义html页面元素的显示形式，是一种格式化网页内容的技术

 

使用：

1）css的语法

选择器{属性1：值1；属性2：值2；...；属性N：值N}，选择器就是要改变页面中的哪些元素

2）CSS的样式位置

1、外部样式表

<link rel="stylesheet" href="xxx.css"/>

2、内联样式表(直接给元素添加样式)

在元素中添加style,例如<p style="color:blue">q我是一段话</p>

3、嵌入式样式表（在html中使用style标签）

<style type="text/css"> h3{font-size:72px}</style>

3)选择器

元素选择器，格式：元素名 p,h3{color:barkorange;}

id选择器，格式：#id #p2{font-size:72px;}

类选择器，格式：.class .c1{font-family:"华文彩云";}

后代选择器，格式：选择器1 选择器2 p.i1{font-size:36px;}

伪类标签

伪类有：:first-child ，:link:， vistited，:hover:，:active，:focus，:lang，:right，:left，:first

何为伪类?就是css内置类css内部本身赋予它一些特性和功能，也就是你不用再class=...或id=...你就可以直接拿来使用，当然你也可以改变它的部分属性比如：

a.link{color:#FF0000}/*未访问的链接*/

a.visited{color:#00FF00}/*已访问的链接*/

a.hover{color:#FF00FF}/*鼠标移动到链接上*/

a.active{color:#0000FF}/*选定的链接*/

<a href="www.baidu.com">百度</a>

imports的应用

<link rel="stylesheet" href="main.css"/>

media 针对不同的设备不同尺寸的屏幕设置不同的样式，特别是如果你需要设置设计响应式的页面

@media screen and(max-width:500px) {     CSS-Code; }

文本属性 font

p{

font-family:"myFont";设置字体

font-size:20px;设置字体大小

font-style:italic;设置斜体

font-weight:bolder;设置加粗

color:#FF00FF;设置字体颜色

line-height:100px;设置行高

letter-spacing:10px;设置文字间隔

text-decoration:none;没有下描线

text-align:left;设置靠左

text-overflow:ellipsis;设置显示省略符号来代表被修剪的文本。

white-space:nowrap;设置不换行

overflow:hidden;

}

背景属性 background

#myDiv{

width:60px;

height:40px;

/*background-color:lightblue*/

background-image:url("baidu_jgylogo3.gif");设置背景图片

background-repeat:no-repeat;设置背景图片是否重复

background-attachment:scroll;设置背景图片是否固定：随着页面滚动存在

border:1px solid red;设置边框类型颜色

}

定位属性 position:

.container{

position:absolute;

}

.demo{

position:relative;

}

<div class="container">

<div>AAAA</div>

<div class="demo">BBBB

</div>

<div>CCCC</div>

</div>

<!--

1.子元素有relative定位时，不脱离文档流

2.子元素有absolute定位时，脱离文档流

3.子元素有absolute定位时，参考1.父级元素定位 2.body原点定位

4.子元素有relative定位时，参考1.自身原点定位

-->

 

z-index 属性

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

#MyIma{

z-index: 999;

}

 

float 浮动属性

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

img {

float: left; 左浮动 float:right;右浮动 }

 

display: 显示属性 visibility: 能见度属性

/*display: none; /!*消失*!/*/ 元素的位置会被其他元素占用

visibility: hidden; /*隐藏*/ 元素位置不会被占用

 

list：列表属性

#fruits{

list-style-type: upper-roman;设置大写的罗马字列表头

list-style-position: inside;

list-style-image: url("icon.jpg");设置有序列表头图片

}

 

盒子模型：

<!-- 盒子模型将html中每一个元素看作为一个盒子，用几个属性描述这个盒子

border 边框

border类型：实线、虚线、双实线等

border的粗细：通过px来描述

border的颜色：通过color表示颜色

margin 外边距

width属性 外边距长：距离其他元素的距离，两个外边距是可以重叠的

padding 内补丁

width属性 内补丁长：边距距离内容的距离

 

-->

转载于:https://my.oschina.net/u/4118325/blog/3042999