css基础

前端

1.css

1.1定义

Cascading Style Sheets

层叠样式表

1.2作用

结构与样式分离的方式，便于后期维护与改版

可以用多套样式，使网页有任意样式切换的效果

使页面载入得更快，降低服务器成本

1.2语法结构

选择器，属性，属性值

选择器不要用数字开头

p{

background-color:red ;

}

1.3引入方式

• 内部 //style

• 外部 //link

引用一个外部css文件

• 行内 //style

内部方式引入css样式表 //写在页面元素内

外部方式引入css样式表

• 外部样式表是新建一个文档，里面全写css，通过link插入到html中

• 使网页的表示层与结构层彻底分离

1.4css选择器

用来选择需要添加样式的位置

1.4.1常用选择器

1.4.2标签选择器

p

1.4.3类选择器

study-url

1.4.4伪类选择器

属性	作用
a:link	未访问的链接
a:visited	已访问的链接
a:hover	鼠标移动到链接上(浮动，悬停)
a:active	向被激活的元素添加样式
:focus	选择拥有键盘输入焦点的元素

1.4.5伪元素选择器

属性	作用
::selection	选择指定元素中被用户选中的内容
::before	可以在内容之前插入新内容
::after	可以在内容之后插入新内容
::first-line	选择指定选择器的首行
::first-letter	选择文本的第一个字符

1.4.6结构类伪类选择器

属性	作用
:first-child	选择元素的第一个子元素
:last-child	选择某个元素的最后一个子元素
:nth-child()	选择某个元素的一个或多个特定的子元素
:nth-last-child()	选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算
:first-of-type	选择一个上级元素下的第一个同类子元素

1.4.7其他选择器

选择器	作用
id,*	选择指定元素中被用户选中的内容
逗号选择器	联合选择器
空格选择器	后代选择器(子孙选择器)
>选择器	子选择器
+选择器	相邻兄弟选择器
[]	属性选择器

1.5样式

1.5.1背景样式

	属性	属性值	作用
1	background-color	颜色值	颜色作为背景颜色
2	background-image //位置url	图片位置	图片作为背景图片
3	background-attachment	scroll,fixed	背景是否随滚动条滚动
4	background-position	见下表	背景图像起始位置
5	background-repeat	repeat,repeat-x,repeat-y,no-repeat
x	background	背景样式的值是复合属性值组合

background-position 属性值 //可用一张图的不同位置，减少内存损耗

值	描述
top left/top center/top right/center left/center center/center right/bottom left/bottom center/bottom right	如果您仅规定了一个关键词，那么第二个值将是“center”。默认值：0% 0%
x% y%	第一个值是水平位，第二个值是垂直位置。左上角是0% 0%。右下角是100% 100%。如果仅设置一个值，另一个则是50%
xpos ypos	第一个值是水平位置，第二个值是垂直位置。左上角是0 0。单位是css单位。如果仅设置一个值，另一个则是50%。可以混合使用%和position值

1.5.2文本样式

属性	属性值	作用
color	颜色	文本颜色
direction	ltr,rtl(文本方向从左至右)	文本的方向/书写方向
letter_spacing	npx //n可为负数	字符间距
line-height	npx	背景是否随滚动条滚动
text-align	left,right,center,justify(两端对齐文本有效)	文本的位置
text-decoration	none,underline,overline,line-through	文本的修饰：例如：下划线
text-shadow	h-shadow v-shadow blur color	文本设置阴影
text-transform	none,capitalize,uppercase,lowercase	改变字母大小写
text-indent	npx,nem	首行缩进

1.5.3列表样式

属性	属性值	作用
list-style-type	none,disc,circle,square,decimal	设置列表项目的外观
list-style-position	inside,outside	列表符号的位置
list-style-image	url,none	把图像设置为列表项目的标记
list-style	同前面三个	简写属性，涵盖以上三个列表样式属性

1.5.4字体样式

属性	属性值	作用
font-family	隶书，宋体啥的	设置字体
font-style	normal,italic,oblique	规定斜体文本
font-weight	normal,bold,100-900	文本的粗细
font-size	npx	字体的大小

1.6颜色表

1.7盒子模型

1.7.1元素

<div></div> //块级元素，割离出一块独立区域

• 块级元素

独占一行，可以设置宽高

div，h，li，table等

• 行内元素

不会独占一行，宽高与内容一样大，元素不能设置宽高

a，label，img，input

1.7.2样式

width，height //宽高

position //定位

• relative //相对位置

• absolute //绝对位置

top，left，right，bottom //上左右下，定位后才可用

overflow //div溢出效果

• visible //默认值。内容不会被修剪，会呈现在元素框之外

• hidden //超出部分被隐藏

• scroll //不论是否需要，都需要显示滚动条

• auto //按需显示滚动条以便查看其余内容

outline //绘制于边框外缘的线，突出元素

• dashed //虚线轮廓

• dotted //点状轮廓

• solid //实线

• double //双线

ps：border-left/right/top/bottom //设置边框

1.7.3布局

width/height //宽高

margin:上 右 下 左 //top，right，bottom ，left。外边距

padding:值同上 //内边距

1.7.4浮动

文档流：标准文档流

特点：

• 空白折叠现象

• 高矮不齐，底边对齐

• 自动换行，一行写满，换行写

脱标流：脱离标准文档流

• 块级元素一行多放

float //浮动

left //向左浮动

right //向右浮动

none //默认值，不浮动

目录

前端

1.css

1.1定义

1.2作用

1.2语法结构

1.3引入方式

1.4css选择器

1.4.1常用选择器

1.4.2标签选择器

1.4.3类选择器

1.4.4伪类选择器

1.4.5伪元素选择器

1.4.6结构类伪类选择器

1.4.7其他选择器

1.5样式

1.5.1背景样式

1.5.2文本样式

1.5.3列表样式

1.5.4字体样式

1.6颜色表

1.7盒子模型

1.7.1元素

1.7.2样式

1.7.3布局

1.7.4浮动

---