小学期前端实训笔记(2)-css【菜狗级】

CSS

css基本语法

选择器{
	属性:值
    属性:值
}

选择器:选中页面中的标签。

属性:设置标签的特性,特征。

值:与属性相对应的值。

三种形式

行内样式

在HTML标签上,使用style的属性设置css样式

<标签名 style="属性:;属性:;"></标签名>

内部样式

style写在head标签的后面,可以实现共享

<head>
	<style>
		h1{
			color:red;
			}
	</style>
</head>

外部样式

写在独立的css文件内,以css后缀结尾

在使用css的html的页面,要使用内链,到title后面

/*index.css*/
h2{
	border:10px solid blue;
}
<head>
		<meta charset="utf-8">
		<title></title>
<!-- 内联形式 -->
		<link rel="stylesheet" type="text/css" href="css/index.css">
</head>

一般用外部样式,高内聚,低耦合,代码复用性强

优先级

采用就近原则 行内>内部和外部,内外部看link与style位置

选择器

标签选择器(范围大)
标签名{

}
ID选择器(精度高)

html标签都可以定义一个id属性,作为该标签在页面中的唯一标识,更加准确

<标签名 id=“值”>

ID选择器的语法

#ID值{
	属性:值;
}
Class选择器

HTML都可以设置class属性值。允许一个页面多个标签设置为相同class值,一个标签也可以有多个class值,最常用

<标签名 class="值1 值2 值3">
.值1{
	color:red;
}
属性选择器
[属性名='属性值']{

}

层次选择器

祖孙选择器

先选祖先元素,从中查找后代,在祖先选择器内部选择元素,(限定范围)

祖先选择器 后代选择器{

}
父子选择器

只能往下查找一代子孙,不会一直向下挖

父选择器>子选择器{

}
兄弟选择器

选择相同父选择器下元素

兄选择器+弟选择器{

}
兄选择器~弟选择器{

}

常用属性

尺寸

width :min-width,max-width

height:min-height,max-height

单位:像素,百分比

注意:对于display属性为inline的元素,尺寸设置不起作用

针对不同分辨率的屏幕

字体

color:设置字体颜色

font-size:设置字体大小,单位是像素px;

font-weight:bold 100~800,一般400

font-family:(字体类型)

font-align:对齐方式,left,right,center

text-decoration:装饰线,none

背景

background:背景颜色和图片

background-color:颜色

颜色名:red/grean,十六进制:#RGB,#RRGGBB,#RGBA,6位16场子

制函数:rgb(255,255,255), rgba(255,255,255,1);

backgrounf-img :图片 (url地址) 存在平铺,小图片重复出现,用到repeat

background-repeat:图片是否重复

background-position:图片位置

盒子模型

html元素,在页面中都占有一个矩形区域

红色是蓝色的内容,白色margi,绿色border,蓝色padding

请添加图片描述

边框

border:宽度,类型,颜色

border-radios:圆角

外边距 margin

元素边框到外部其他元素的距离

左右方向的外边距不会超出父元素,也不重合

上下方向的外边距可以超出父元素外面去,也可能重合(可以通过设置其他元素来保证不出界,比如border)

内边距 padding

元素的边框到他的内容之间的距离

浮动

HTML标准文档流(DOM流)

所以html标签中,有两种排列方式

1)行内元素:从左向右排序,一行无法显示才换行

​ 分两类:行内,行内块

<a> <img> <b> <strong> <i> <em> <sup> <sub> <span> <td> <th> <input> <select> <textarea> <button>
2)块级元素:默认从上往下排列,每个元素独占一行
<h1>~<h6> <p> <ul> <ol> <dl> <li> <dt> <dd> <table> <tr> <form> <div>

display属性:html标签的显示属性,block(块),inline(行内 不可设置宽度高度), inline-block(行内块 可以设置), none(不显示)。

虽然display是可以改变元素的显示方式的,但是一般不建议

如果一个inline需要该,可以变成inline-block

什么是浮动

通过一个float属性,让元素脱离HTML的标准文档流。将元素的排列方式变成从左向右或者从右向左

超脱但不完全

清除浮动

把消失的空间找回来

1)父元素设置固定高度

2)在浮动元素的后面添加一个块级元素

3)伪元素(推荐) 设置一个浮动元素的父元素的伪元素

::before在头部添加伪元素
::after 尾部

定位

脱离标准文档流,到html的上面 css(层叠样式表)

能让元素重叠的唯一方式

相对定位

1)相对定位的元素,在dom流中的位置不会消失(其他元素位置不变)

2)相对于原始位置的变化

position:relative;
top:100px;

相对原来的元素向top的反方向移动100px

绝对定位

1)原来dom中的元素也会消失

2)相对于离他最近的已经定位的父元素进行偏移,如果父标签都无定位,那么相对于标签(根标签 自左上到右下 )进行偏移

position:absolute;
top:100px;    //无定位情况下,表示距离html上部100px;
固定定位

1)原来dom中的元素也会消失

2)相对于浏览器的窗口进行偏移

position:fixed;

固定与绝对定位会脱离浏览器控制,变得自由,将会自动适应,只将子元素显示出来就停止。

伪类样式

选择器:伪类样式         选择器:nth-child(下标)
first-child
选择器:nth-child(下标)

在选取的元素中,再根据下标的顺序查找元素,从1开始

主要键对超链接有四种状态

1.未访问链接

:linked

2.已访问链接

:visited

3.鼠标移上

:hover

4.鼠标移下


HTML+CSS布局

1)先从上往下分成多个块

2)再自左向右分成多个块

3)CSS填充每一个细节

风尚堂规划框架

导航栏

banner

主体

页脚

阿贾克斯懒加载

京东图片懒加载

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值