CSS简介

CSS 指的是层叠样式表 (Cascading Style Sheets)
CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
CSS 节省了大量工作。它可以同时控制多张网页的布局
外部样式表存储在 CSS 文件中

简单的css实例

body{background:darkgrey;
}
h1{font-family: 幼圆;
}
p{font-size: 50px;color: salmon;
}

效果图

CSS解决的问题

HTML的目的是描述网页的内容，并且在HTML里面用标签和color属性给大型网站的页面添加字体和颜色样式是一个漫长且昂贵的过程。
而CSS从HTML页面中删除了样式格式。样式定义通常保存在外部.css文件中。
通过使用外部样式表文件，就可以改变整个网站的外观。

CSS语法

CSS由选择器和声明块组成，如图所示：

1.选择器：需要设置的HTML元素
2.声明块：包含一条或多条用分号分隔的声明
3.每条声明块都包含一个CSS属性名称和一个值，用冒号分隔
4.多条CSS声明用分号分隔
5.声明块用花括号括起来

实例
将文本中的内容字体设置为50像素，颜色设置为salmon。

p{font-size: 50px;color: salmon;
}

代码分析：
p是css中的选择器
font-size是属性，red是属性值
color是属性，salmon是属性值

CSS选择器

CSS选择器用于查找（或选取）要设置样式的HTML元素

类型	作用
简单选择器	根据名称、id、类来选取元素
组合器选择器	根据选择器之间的特定关系来选取元素
伪类选择器	根据特定状态选取元素
伪元素选择器	选取元素的一部分并设置其样式
属性选择器	根据属性或属性值来选取元素

此网站讲解了最基本的 CSS 选择器CSS选择器详解

CSS伪类

定义：伪类用于定义元素的特殊状态

语法：

selector:pseudo-class {property: value;
}

实例：链接以不同的方式显示

/*未访问的样式*/
a:link{color: black;
}
/*已访问的样式*/
a:visited{color: cadetblue;
}
/*鼠标悬停的样式*/
a:hover{color: red;
}

效果：

注：a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效。伪类名称对大小写不敏感。

CSS 3D转换

通过CSStransform属性，使用以下3D转换方法：

rotateX()
rotateY()
rotateZ()

实例：

div {width: 300px;height: 100px;background-color: yellow;border: 1px solid black;
}
#myDiv {transform: rotateX(150deg);transform: rotateY(150deg);transform: rotateZ(150deg);
}

效果：

前端——CSS部分总结相关推荐

好程序员web前端CSS选择符（选择器）:表示要定义样式的对象
好程序员web前端CSS选择符(选择器):表示要定义样式的对象 1) 元素选择符/类型选择符(element选择器 ) 如:div{width:100px; height:100px; backgro ...
Web前端css知识点概括
Web前端css知识点的简单概括如下,方便记忆. 1.字体,背景(font-style,font-weight,font-size/line-height,font-family...backgrou ...
WEB前端 CSS(非布局)
目录 WEB前端 CSS CSS引入方式 CSS结构 CSS选择器直接选择器组合选择器分组选择器也叫并集选择器属性选择器伪类选择器伪元素选择器 CSS选择器是一个查找的过程,高效的查找影 ...
二：前端css，即选择器
前端css: 1,css 的引入方式 2,css中选择器 1.基本选择器: /*标签选择器*/ /*类标签选择器,.类属性值重点知识*/ /*id选择器,#+id值,#id的值,不是id,重点知识* ...
前端css单位小结：vh、vw、百分比、rem、px、计算属性calc
写在前面: 本文作为本人学习总结之用,同时分享给大家~ 个人前端博客网站:zhangqiang.hk.cn 欢迎加入博主的前端学习qq交流群::706947563,专注前端开发,共同学习进步! 前端c ...
前端css基础知识点之PC端项目-规范
前端css基础知识点之PC端项目-规范 1 文件管理文件名用英文命名 css文件夹 reset.css(常用的浏览器样式) public.css(公共的样式.比如页面的头部尾部.重复使用字体.字号等 ...
咸鱼前端—CSS浮动
咸鱼前端-CSS浮动浮动(float) 浮动特性布局流程浮动(float) 元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制,移动到其父元素中指定位置的过程. 在CSS中,通过float ...
咸鱼前端—CSS盒子模型
咸鱼前端-CSS盒子模型盒子模型盒子边框(border) 圆角边框(CSS3) 内边距(padding) 外边距(margin) 盒子阴影盒子模型所谓盒子模型就是把HTML页面中的元素看作是一 ...
咸鱼前端—CSS初识
咸鱼前端-CSS初识 CSS的发展历程 CSS 网页的美容师 CSS初识引入CSS样式表(书写位置) CSS样式规则 CSS的发展历程从HTML被发明开始,样式就以各种形式存在.不同的浏览器结合它 ...
咸鱼前端—CSS选择器
咸鱼前端-CSS选择器选择器标签选择器(元素选择器) 类选择器多类名选择器 id选择器通配符选择器选择器要想将CSS样式应用于特定的HTML元素,首先需要找到该目标元素.在CSS中,执行这 ...

前端——CSS部分总结

目录