课堂笔记

℡╲_俬逩灬. 提交于 2021-01-10 04:43:37

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属性 内补丁长:边距距离内容的距离

 

-->

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!