层叠样式表-----CSS总结

最新推荐文章于 2024-07-12 20:49:16 发布

warmth

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量194

点赞数

分类专栏： JavaWeb 文章标签： css css3

本文链接：https://blog.csdn.net/qq_43276642/article/details/106085102

版权

JavaWeb 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一.

2007年，W3C将页面--提出了三层分离：HTML、css、JavaScript进行分离
   HTML：页面结构层
   CSS：页面的表示层
   JavaScript：页面的行为层

1.什么是CSS：

CSS：（Cascading Style Sheet）：级联样式表、层叠样式表，一门用来渲染、装扮、美化页面的技术。

2、CSS目前主要的版本：

CSS2.x版本
CSS3.x版本：主要是为移动端

3、CSS的几种写法

   三种写法
   行内式：行内样式，又叫做标签样式，主要是写在标签的style属性上，好处是优先级别较高，坏处是只能渲染一个标签不推荐使用行内样式，可以做页面微调
内嵌式：内嵌样式，又叫做页面样式，是将 CSS 写在网页源文件的头部，即在 head 间，通过使用 HTML 标签中的 style标签将其包围，其特点是该样式只能在此页使用，解决行内样式多次书写的弊端
   外链式：将css书写在一个独立的css文件中（xxx.css），使用link标签引入，rel="stylesheet"属性不能少，href引入路径（链接式通过 HTML 的 link 标签，将外部样式表文件链接到 HTML 文档中）

二.css选择器

基本语法：

选择器 { 属性: 属性值;

属性: 属性值;

.... ....

}

1.基本选择器

基本选择器是使用概率最高，也是最常被使用的选择器。基本选择器包括如下选择器：

1. 标签选择器（根据标签名称获取）

2. ID选择器（获取id为xx的标签）

3. 类选择器（获取标签中class=xxx的标签）

4. 通用选择器（通配符）
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*
不建议使用通配符选择器，建议使用reset.css
* {
color: red;
}
*/
/* 标签选择器 */
div {
color: aqua;
}
/* id选择器 */
#myprogram {
background: yellow;
}
/* 类选择器题 */
.mylove2 {
color: red;
}
</style>
</head>

2.包含选择器

1. 子代选择器(获取某个标签的第一级子标签)

2. 后代选择器（获取某个标签中的所有的子标签）

3. 分组选择符，也叫做逗号选择器（可以同时设定多个标签，使用逗号进行分割）
<head>
<meta charset="UTF-8">
<title></title>
<style>
/* 子代选择器 */
div.list>ul {
border: 1px solid red;
}
/* 后代选择器 */
.list li {
border: 1px solid red;
}
/* 逗号选择器 */
.mylove, #myprogram, h1 {
color: #eee;
width: 200px;
height: 30px;
background: skyblue;
}
</style>
</head>

3.属性选择器

<style>
/* 表示选中的标签中存在某个属性 */
.container[class] {
color: red;
}
div[title] {
color: #00FFFF;
}
/* 确切的等于*/
input[type='text'] {
background: red;
}
/* 属性的值中包含某个值 */
input[type*='e'] {
background: red;
}
/* 以什么开始 */
input[type^='e'] {
background: red;
}
/* 以什么结尾 */
input[type$='rl'] {
background: red;
}
/* +表示下一个标签 */
.msg + p{
border: 1px solid red;
}
/* 属性名称等于属性值 */
[title="这个是标题"] {
color: red;
}
</style>

4.伪类选择器

同一个标签，根据其不同的种状态，有不同的样式。这就叫做“伪类”。伪类用冒号来表示。

/*让超链接点击之前是红色*/
a:link{
color:red;
}
/*让超链接点击之后是橙色*/
a:visited{
color:orange;
}
/*鼠标悬停，放到标签上的时候*/
a:hover{
color:green;
}
/*鼠标点击链接，但是不松手的时候*/
a:active{
color:black;
}

a:link 、a:visited 、a:hover 、a:active

注意：，在css中，这四种状态必须按照固定的顺序写：如果不按照顺序，那么将失效。“爱恨准则”：love hate。必须先爱，后恨。

5.伪元素选择器

在css3中，css还提供了伪元素选择器，也就是这个选择器可以构建一个伪元素，也就是无法提供js等技术访问的的元素，但是确实在页面中存在的，只能使用css渲染的，这样的元素是的css的功能进一步的加强了，这两个元素就是before和aer，但是 css2已经定义过了这两个选择器，表示之前和之后的选择器，所以就存在这样的写法：

:before 表示css2中的伪类选择器
:after 表示css2中的伪类选择器
::before 表示css3的伪类选择器
::after 标签css3的伪类选择器

before和aer选择器必须书写content属性

p::before {
display: inline-block;
content: "s";
width: 10px;
height: 10px;
background: red;
border: 1px solid red;
border-radius: 50%;
}
p::after
{
content:" -- liu";
}

三.css常见样式

warmth

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
层叠样式表-----CSS总结

一.2007年，W3C将页面--提出了三层分离：HTML、css、JavaScript进行分离 HTML：页面结构层 CSS：页面的表示层 JavaScript：页面的行为层1.什么是CSS： CSS：（Cascading Style Sheet）：级联样式表、层叠样式表，一门用来渲染、装扮、美化页面的技术。2、CSS目前主要的版本： CSS2.x版本 CSS3.x版本：主要是为移动端3、CSS的几种写法...
复制链接

扫一扫