文章目录

语法
选择器
插入样式表
css样式

背景
文本
链接
其它(列表，表格，轮廓)

框模型
CSS 定位
媒介

css发展，

语法

CSS 规则由两个主要的部分构成：选择器selector，以及一条或多条声明declaration。每条声明由一个属性和一个值组成。属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。如：
h1 {color:red; font-size:14px;}

值的不同写法和单位

p { color: #ff0000; }
p { color: rgb(255,0,0); }
p { color: rgb(100%,0%,0%); }
如果值为若干单词，则要给值加引号 p {font-family: “sans serif”;}

CSS 对大小写不敏感。不过存在一个例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。

选择器的分组
h1,h2,h3,h4,h5,h6 {
color: green;
}

根据 CSS，子元素从父元素继承属性。如果对body设置 Verdana 字体，则不需要另外的规则，所有 body 的子元素都应该显示 Verdana 字体

选择器

派生选择器(标签、id、class、属性组合)
通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。如，

.html
<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
.css
li strong {
    font-style: italic;
    font-weight: normal;
  }

id选择器
#idvalue {color:red;}
class选择器
.center {text-align: center}

可以有多类, 比如对于元素<p class=“important urgent warning”>This paragraph is a very important warning.</p>
可以设置：.important.warning {background:silver;}

属性选择器
下面的例子为带有 title 属性的所有元素设置样式：
[title]{color:red;}
下面的例子为 title=“W3School” 的所有元素设置样式：
[title=W3School]{border:5px solid blue;}

多属性：a[href][title] {color:red;}
后代选择器
如 ul em{...}
注意：即两个元素之间的层次间隔可以是无限的，上面这个语法就会选择从 ul 元素继承的所有 em 元素，而不论 em 的嵌套层次多深。
子元素选择器
如h1 > strong {color:red;}
相邻兄弟选择器（Adjacent sibling selector）
如h1 + p {margin-top:50px;}
这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。
CSS分组
如，h1, h2, h3, h4, h5, h6 {color:blue;}
通配符*， * {color:red;}
伪类、伪元素

属性	描述
:active	向被激活的元素添加样式。
:focus	向拥有键盘输入焦点的元素添加样式。
:hover	当鼠标悬浮在元素上方时，向元素添加样式。
:link	向未被访问的链接添加样式。
:visited	向已被访问的链接添加样式。
:first-child	向作为第一个子元素的元素添加样式。
:lang	向带有指定 lang 属性的元素添加样式。
-	上面几个是伪类，下面几个是伪元素
:first-letter	向文本的第一个字母添加特殊样式。
:first-line	向文本的首行添加特殊样式。
:before	在元素之前添加内容。
:after	在元素之后添加内容。

插入样式表

外部样式表
<link rel="stylesheet" type="text/css" href="mystyle.css" />
内部样式表

<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>

内联样式
<p style="color: sienna; margin-left: 20px">This is a paragraph</p>
多重样式
如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。优先级如下，其中数字 4 拥有最高的优先权。

浏览器缺省设置
外部样式表
内部样式表（位于 \ 标签内部）
内联样式（在 HTML 元素内部）

css样式

背景

background-color， background-image，background-repeat ，background-position 改变图像在背景中的位置，background-attachment 防止背景图形跟随页面滚动

body 
  {
  background-image:url(/i/eg_bg_02.gif);
  background-repeat:no-repeat;
  background-position:50px 100px;       background-position:66% 33%;       background-position:top;
  background-attachment:fixed,           默认scroll
  }

文本

属性	描述
color	设置文本颜色
line-height	设置行高。
letter-spacing	设置字符间距。
text-align	对齐元素中的文本。
text-decoration	向文本添加修饰。
text-indent	缩进元素中文本的首行。
text-shadow	设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性。
text-transform	控制元素中的字母。
white-space	设置元素中空白的处理方式。
word-spacing	设置字间距。
font	简写属性。作用是把所有针对字体的属性设置在一个声明中。
font-family	设置字体系列。
font-size	设置字体的尺寸。
font-style	设置字体风格。
font-variant	以小型大写字体或者正常字体显示文本。
font-weight	设置字体的粗细。

链接

链接有4种状态：

a:link {color:#FF0000;}		/* 未被访问的链接 */
a:visited {color:#00FF00;}	/* 已被访问的链接 */
a:hover {color:#FF00FF;}	/* 鼠标指针移动到链接上 */
a:active {color:#0000FF;}	/* 正在被点击的链接 */

当为链接的不同状态设置样式时，请按照以下次序规则：
a:hover 必须位于 a:link 和 a:visited 之后
a:active 必须位于 a:hover 之后

其它(列表，表格，轮廓)

参考：https://www.w3school.com.cn/css/css_list.asp

框模型

在这里插入图片描述
元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

元素的背景是内容、内边距和边框区的背景

在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

外边距可以是负值，而且在很多情况下都要使用负值的外边距。

内边距

可以按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值：
h1 {padding: 10px 0.25em 2ex 20%;}
也通过使用下面四个单独的属性，分别设置上、右、下、左内边距：

padding-top
padding-right
padding-bottom
padding-left

边框border

CSS 定位

绝对、相对、浮动

媒介

定义在不同媒介(如纸、屏幕)上的显示效果。如

html>
<head>

<style>
@media screen{ 
p.test {font-family:verdana,sans-serif; font-size:14px} 
}

@media print{
p.test {font-family:times,serif; font-size:10px}
}

@media screen,print{
p.test {font-weight:bold}
}
</style>
</head>
<body>....</body>
</html>

来源：CSDN

作者：zz的博客

链接：https://blog.csdn.net/qq_41956860/article/details/104598996

标签

css

css第一个元素

css选择器

css颜色

background

css样式