CSS是什么

CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。

当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。

CSS样式

CSS引入HTML

内部样式与外部样式

<!DOCTYPE>
<html>
<head><meta charset="utf-8" /><title>内部样式表和外部样式表</title><!--内部部样式表--><style type="text/css">p{color: blue;}</style><!--外部样式表--><link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body><p>我是p段落</p><div>我是div</div><ol><li>1111</li><li>2222</li></ol>
</html>

行内样式

<p style="color: red">Hello world.</p>

基本选择器

元素选择器

p {color: "red";}

ID选择器

#i1 {background-color: red;
}

类选择器

.c1 {font-size: 14px;
}
p.c1 {color: red;
}

注意：

样式类名不要用数字开头（有的浏览器不认）。

标签中的class属性如果有多个，要用空格分隔。

通用选择器

* {color: white;
}

组合选择器

后代选择器

/*li内部的a标签设置字体颜色---指所有a*/
li a {color: green;
}

儿子选择器

/*选择所有父级是 <div> 元素的 <p> 元素*/
div>p {font-family: "Arial Black", arial-black, cursive;
}

毗邻选择器

/*选择所有紧接着<div>元素之后的<p>元素*/
div+p {margin: 5px;
}

弟弟选择器

/*i1后面所有的兄弟p标签*/
#i1~p {border: 2px solid royalblue;
}

属性选择器

/*用于选取带有指定属性的元素。*/
p[title] {color: red;
}
/*用于选取带有指定属性和值的元素。*/
p[title="213"] {color: green;
}/*找到所有title属性以hello开头的元素*/
[title^="hello"] {color: red;
}/*找到所有title属性以hello结尾的元素*/
[title$="hello"] {color: yellow;
}/*找到所有title属性中包含（字符串包含）hello的元素*/
[title*="hello"] {color: red;
}/*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：*/
[title~="hello"] {color: green;
}

分组和嵌套

分组

当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。

例如：

div, p {color: red;
}

上面的代码为div标签和p标签统一设置字体为红色。

通常，我们会分两行来写，更清晰:

div,
p {color: red;
}

嵌套

多种选择器可以混合起来使用，比如：.c1类内部所有p标签设置字体颜色为红色。

.c1 p {color: red;
}

字体属性

文字字体

font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。

简单实例：

body {font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
}

文本颜色

颜色属性被用来设置文字的颜色。

颜色是通过CSS最经常的指定：

十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red

还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。

背景属性

/*背景颜色*/
background-color: red;
/*背景图片*/
background-image: url('1.jpg');
/*背景重复repeat(默认):背景图片平铺排满整个网页repeat-x：背景图片只在水平方向上平铺repeat-y：背景图片只在垂直方向上平铺no-repeat：背景图片不平铺
*/
background-repeat: no-repeat;
/*背景位置*/
background-position: right top;
/*background-position: 200px 200px;*/

支持简写：

background:#ffffff url('1.png') no-repeat right top;

使用背景图片的一个常见案例就是很多网站会把很多小图标放在一张图片上，然后根据位置去显示图片。减少频繁的图片请求。

display属性

用于控制HTML元素的显示效果。

值	意义
display:"none"	HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。
display:"block"	默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。
display:"inline"	按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
display:"inline-block"	使元素同时具有行内元素和块级元素的特点。

display:"none"与visibility:hidden的区别：

visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

选择器补充

伪类选择器

/* 未访问的链接 */
a:link {color: #FF0000
}/* 已访问的链接 */
a:visited {color: #00FF00
} /* 鼠标移动到链接上 */
a:hover {color: #FF00FF
} /* 选定的链接 */
a:active {color: #0000FF
}/*input输入框获取焦点时样式*/
input:focus {outline: none;background-color: #eee;
}

伪元素选择器

first-letter

常用的给首字母设置特殊样式：

p:first-letter {font-size: 48px;color: red;
}

before

/*在每个<p>元素之前插入内容*/
p:before {content:"*";color:red;
}

after

/*在每个<p>元素之后插入内容*/
p:after {content:"[?]";color:blue;
}

before和after多用于清除浮动。

摘抄自：https://www.cnblogs.com/liwenzhou/p/7999532.html

02.CSS基础笔记及导入相关推荐

CSS基础入门，导入方式，选择器
CSS基础入门本博客为视频学习笔记原视频作者:狂神原视频地址:https://www.bilibili.com/video/BV1YJ411a7dy?p=2 1 了解CSS 1.1 如何学习cs ...
CSS基础笔记（多看多记冲冲冲）
加油加油加油,天天做笔记! 入门跟着黑马的pink老师在b站的视频走的. 这是他的b站链接. https://www.bilibili.com/video/BV14J4114768?p=1 文章目录 ...
妙味课堂——HTML+CSS基础笔记
妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...
CSS基础笔记（w3school）
CSS 概述 CSS 基础语法 1.CSS语法 2.值的不同写法和单位 3.记得写引号 4.多重声明 5.空格和大小写 CSS 高级语法 1.选择器的分组 2.继承及其问题 3.友善地对待Netsca ...
前端 CSS 基础笔记
CSS入门一.CSS简介 1.什么是CSS CSS:Cascading Style Sheet 层叠样式表是一组样式设置的规则,用于控制页面的外观样式二.基本用法 1.css语法 <hea ...
HTML+CSS基础笔记
PS基础前端需要的PS技能图片格式 PSD测量注意事项代码初识 background border padding margin 盒模型和结构样式常见文本设置 img a标签常见标签和SEO ...
Java EE之旅02 CSS基础
###css的简介 ####什么是css 概念:层叠样式表,css是对html进行样式修饰语言层叠:就是层层覆盖叠加,如果不同的css样式对同一html标签进行修饰,样式有冲突的部分应用优先级高的, ...
html css基础笔记,学习html/css基础的重点笔记
1.权重问题内联样式表 > id选择符 > class选择符 > 类型选择符(所有html标签名称) 内联样式表 > 内部样式表.外部样式表内部样式表.外部样式表的权重与书 ...
html+css基础笔记_CSS样式_part1_2
1.CSS背景样式属性: background-color:背景色 background-image:背景图 url背景地址,默认水平垂直铺满背景图写法:background-image: url ...

02.CSS基础笔记及导入