狂神说html笔记,CSS随堂笔记【狂神说JAVA】

什么是CSS

CSS 简介

CascadingStyleSheet层叠样式表

CSS 表现层，美化网页

字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动

CSS语法

CSS 发展史

css1.0

css2.0 DIV+CSS HTML与CSS结构分离思想，页面变得简单，SEO

css2.1 新增浮动和定位功能

css3新增圆角，阴影，动画等功能 ， 浏览器兼容性更强

CSS优势

内容和表现分离

网页结构表现统一，可以实现复用

样式十分丰富

外部样式表可以极大提高工作效率

利于SEO，容易被搜索引擎收录(VUE不利于被搜索引擎收录)

CSS的三种导入方式

行内样式

我是标题

内部样式

h1{

color: indianred;

}

外部样式

将css样式存储在外部的一个css文件中，然后引入

链接式:

导入式:(css2.1特有)

/*@import url("css/style.css");*/

@import "css/style.css";

三种导入方式优先级：就近原则

选择器

作用：选择页面上的某一个或某一类元素

基本选择器

标签选择器(选择一类标签)标签名{}

h1{

color: #a1185a;

background: yellow;

border-radius:15px;

text-align: center;

}

类选择器 (选择 所有Class属性 一致的标签，可以跨标签选择).Class名{}

.titile{

color: #893873;

background: #598e0f;

border-radius:15px;

text-align: center;

}

ID选择器 (全局唯一)#ID名{}

#p{

color: chocolate;

}

我是时光

优先级

ID选择器> 类选择器>标签选择器

层次选择器

后代选择器 可选择多代

/* 后代选择器*/

body p{

background: #598e0f;

}

子类选择器 只选择一代 子类

/* 子选择器 */

body > p{

background: chocolate;

}

相邻兄弟选择器 同辈 只有一个(向下)

/*相邻选择器*/

.active + p{

background: red;

}

通用兄弟选择器 同辈 可以有多个

/* 通用兄弟选择器 */

.active ~ p{

background: red;

}

结构伪类选择器

伪类选择器作用：根据条件筛选

/*ul的第一个子元素 */

ul li:first-child{

color: red;

}

/* ul的最后一个子元素 */

ul li:last-child{

color:yellow;

}

/*选择每一个p元素的第一个字母*/

p:first-letter{

background:darkcyan ;

}

/*选中p1,先定位到父元素的第一个子元素，当定位的元素与当前元素一致时才生效*/

p:nth-child(1){

color: #893873;

}

/*按类型选择父元素下的第1个P元素*/

p:nth-of-type(1){

color: chocolate;

}

/*鼠标悬浮时改变背景色*/

li:hover{

background: brown;

}

属性选择器

.demo a{

float: left;

display: block;

background: #893873;

color: blue;

border-radius: 10px;

/*行高与容器高度一致时垂直居中*/

/*line-height: 50px;*/

text-align: center;

/*加粗 字体大小 行高 */

font: bold 20px/50px Arial;

/*取消下划线*/

text-decoration: none;

margin-right: 10px;

width: 50px;

height: 50px;

}

/*选择具有id属性的元素*/

/*属性*/

/*a[id]{*/

/* background: hotpink;*/

/*}*/

/*选择id属性为first 的元素*/

/*属性名 = 属性值(可以是正则表达式)*/

/*绝对相等 =

包含 *=

开头 ^=

结尾 $=

*/

/*a[id=first]{*/

/* background: chocolate;*/

/*}*/

/*class 属性中有links item的元素*/

/*a[class="links item"]{*/

/* background: yellow;*/

/*}*/

/*选中href属性中以http开头的元素*/

/*a[href^=http]{*/

/* background: coral;*/

/*}*/

/*选中href属性以html结尾的元素*/

a[href$=html]{

background: yellow;

}

美化网页元素

为什么要美化网页

有效地传递页面信息

吸引用户

凸显页面主题

提升用户体验

span标签：重点要突出的子，用span套起来

字体样式

font-family: 字体

font-size: 字体大小

font-weight:字体粗细

color:字体颜色

文本样式

color: 颜色 (rgb rgba)

text-align:排版，居中

text-indent:首行缩进(单位用em表示)

line-height:行高(行高与容器高度一致时可以设置垂直居中)

文本的装饰效果

text-decoration:

图片和文本居中对齐

bilibili

img,span{

vertical-align: middle;

}

超链接伪类

a:hover{}

阴影

text-shadow :阴影颜色，水平偏移，垂直偏移，阴影半径

列表

list-style:

none:去掉圆点

circle:空心圆

decimal:数字

square:正方形

背景

背景颜色

/*颜色 路径 位置 平铺方式*/

background: red url("image/下拉箭头.png") 250px 0px no-repeat;

/*单独设置*/

background-image: url("image/右.png");

background-position:250px 0px ;

background-repeat:no-repeat;

背景图片

div{

width: 1000px;

height: 750px;

border: #a1185a solid 2px;

/*默认全部平铺*/

background-image: url("img/01.jpg");

}

.div1{

/*水平平铺*/

background-repeat: repeat-x;

}

.div2{

/*竖直平铺*/

background-repeat: repeat-y;

}

.div3{

/*不平铺*/

background-repeat: no-repeat;

}

渐变

线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向

径向渐变(Radial Gradients)- 由它们的中心定义

盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(Box Model)：

Margin(外边距) - 清除边框外的区域，外边距是透明的。

Border(边框) - 围绕在内边距和内容外的边框。

Padding(内边距) - 清除内容周围的区域，内边距是透明的。

Content(内容) - 盒子的内容，显示文本和图像。

圆角边框

border-radius:

顺序：左上，右上，右下，左下(顺时针)