Css复习

ps:不是专业前端-后续再说吧

Css复习

1.Css介绍入门

。CSS是一种标准样式表语言，用于描述网页的表示形式（即布局和格式）。

内联样式 -使用styleHTML开始标记中的属性。
style属性将其附加到元素。

该style属性包括一系列CSS属性和值对。每"property: value"对之间用分号（;）分隔，就像您写入嵌入式样式表或外部样式表一样。但是它必须全部在一行中，即分号后没有换行符

<h1 style="color:red; font-size:30px;">This is a heading</h1>
<p style="color:green; font-size:22px;">This is a paragraph.</p>
<div style="color:blue; font-size:14px;">This is some text content.</div>

嵌入式样式 -使用``文档头部的元素。
嵌入或内部样式表仅影响嵌入它们的文档。

<style>在HTML文档中定义任意数量的元素，但是它们必须出现在<head>和</head>标记之间。

<!DOCTYPE html><html lang="en"><head>
    <title>My HTML Document</title>
    <style>
        body { background-color: YellowGreen; }
        p { color: #fff; }
    </style></head><body>
    <h1>This is a heading</h1>
    <p>This is a paragraph of text.</p></body></html>

外部样式表 -使用``元素，指向外部CSS文件。

1.链接外部样式表

链接之前，我们需要先创建一个样式表。

body {
    background: lightyellow;
    font: 18px Arial, sans-serif;}h1 {
    color: orange;}

<!DOCTYPE html><html lang="en"><head>
    <title>My HTML Document</title>
    <link rel="stylesheet" href="css/style.css"></head><body>
    <h1>This is a heading</h1>
    <p>This is a paragraph of text.</p>
    </body></html>

导入外部样式表

该@import规则是加载外部样式表的另一种方法。该@import语句指示浏览器加载外部样式表并使用其样式。

<style>
    @import url("css/style.css");
    p {
        color: blue;
        font-size: 16px;
    }
  </style>

样式表再导入

@import url("css/layout.css");
@import url("css/color.css");body {
    color: blue;
    font-size: 14px;}

2.css语法

CSS样式表由一组规则组成，这些规则由Web浏览器解释，然后应用于文档中的相应元素，例如段落，标题等。

CSS规则有两个主要部分，一个选择器和一个或多个声明：

CSS选择器语法图

选择器指定CSS规则适用于HTML页面中的哪个元素。

而块内的声明决定了元素在网页上的格式。每个声明都包含一个属性和一个值，这些值和值之间用冒号（:）分隔并以分号（;）结尾，并且声明组用花括号括起来{}。

该属性是您要更改的样式属性。它们可以是字体，颜色，背景等。每个属性都有一个值，例如color属性可以具有value blue或#0000FFetc。

h1 {color:blue;text-align:center;}

CSS声明始终以分号“ ;” 结尾，并且声明组始终被大括号“ {}” 包围。

注释

/*`，以结束`*/

虽然CSS属性名称和许多属性值都不区分大小写。但是CSS选择器是区分大小写，例如：.maincontent与.mainContent是两个不同的class类选择器，是区分大小写的。

3.css选择器

CSS选择器是一种用于匹配HTML文档中元素的模式。关联的样式规则将应用于与选择器模式匹配的元素。

1.通用选择器

* {
    margin: 0;
    padding: 0;
  }

通用选择器（用*星号或星号表示）与页面上的每个单个元素匹配。如果目标元素上存在其他条件，则可以省略通用选择器。此选择器通常用于从元素中删除默认的边距和填充，以进行快速测试。

2.元素类型选择器

元素类型选择器将文档树中元素的每个示例与相应的元素类型名称进行匹配。

p {
    color: blue;
  }

3.ID选择器

#error {
    color: red;}

4.类选择器

.blue {
    color: blue;
      }

5.后代选择器

当需要选择一个元素是另一个元素的后代时，可以使用这些选择器。例如，如果您只想定位无序列表中包含的那些定位点，而不要定位所有定位点元素。

CSS后代选择器示例

This is a heading

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS后代选择器示例</title>
<style>
	h1 em {
		color: green;
	}
    ul.menu {
        padding: 0;
        list-style: none;
	}
    ul.menu li{
        display: inline;
	}
	ul.menu li a {
		margin: 10px;
		text-decoration: none;
	}
</style>
</head>
<body>
//h1-包裹的就是子- h1 em-选择器写法
	<h1>This is a <em>heading</em></h1>
	<ul class="menu">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>		
		<li><a href="#">Services</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</body>
</html>

选择器内的样式规则ul.menu li a仅适用于](https://www.cainiaojc.com/html/html-links.html)包含在具有class 的[无序列表](https://www.cainiaojc.com/html/html-links.html)内的那些即锚元素`.menu`，并且对文档内的其他链接没有影响。同样，`h1 em`选择器内的样式规则仅适用于[heading内包含的元素``。

6.子选择器

子选择器只能用于选择作为某些元素的直接子元素的那些元素。子选择器由两个或多个选择器组成，两个选择器之间用大于号（即>）隔开。例如，您可以使用这些选择器在具有多个级别的嵌套列表中选择列表元素的第一级。

CSS子选择器示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS子选择器示例</title>
<style>
	ul > li {
		list-style: square;
	}
	ul > li ol {
		list-style: none;
	}
</style>
</head>
<body>
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>		
		<li>
			<a href="#">Services</a>
			<ol>
				<li><a href="#">Design</a></li>
				<li><a href="#">Development</a></li>
			</ol>
		</li>
		<li><a href="#">Contact</a></li>
	</ul>
</body>
</html>

--我们要让ol下的没有黑点--我们就需要定位

ul>li-

ul>li ol

剩下选择器

相邻兄弟选择器

通用兄弟选择器

分组选择器

样式表中的多个选择器通常共享相同的样式规则声明。您可以将它们分组为一个逗号分隔的列表，以最大程度地减少样式表中的代码。它还可以防止您一遍又一遍地重复相同的样式规则。

h1 {
    font-size: 36px;
    font-weight: normal;
   }
h2 {
    font-size: 28px;
    font-weight: normal;
   }
h3 {
    font-size: 22px;
    font-weight: normal;
   }

h1, h2, h3 {font-weight: normal;}
h1 {font-size: 36px;}
h2 {font-size: 28px;}
h3 {font-size: 22px;}

4.属性

1.颜色属性

CSS color属性定义元素的前景色。

body {color: #000000;}

CSS中的颜色通常由以下方法指定：

十六进制值-例如“#ff0000”
RGB值-例如“ rgb（255,0,0）”
颜色名称-如“红色”

查看CSS颜色名称以获取可能颜色名称的完整列表。

该color属性不仅用于文本内容，而且还用于前端中采用颜色值的所有内容。如果尚未为元素明确定义border-color或outline-color值，则将使用颜色值。

2.背景属性

https://www.cainiaojc.com/css/css-background.html

background-color`， body {background-color: #f0e68c;}背景颜色
`background-image`  body {background-image: url("leaf.jpg");} 背景图像
，`background-repeat`，
`background-attachment`
`background-position

3.字体

font-family`，`font-style`，`font-variant`，`font-weight`和`font-size

https://www.cainiaojc.com/css/css-fonts.html

4.文本

h1 {
    color: #ff0000;
}
h1 {
    text-align: center;
}

颜色文字对齐

5.链接

链接或超链接是从一个Web资源页面连接到另一个Web资源页面。

link, visited, active 和 hover

a：link —为没有鼠标指针的普通或未访问链接设置样式。
a：visited-设置用户访问过但没有鼠标指针的链接的样式。
a：hover —当用户将鼠标指针放在链接上时，设置链接的样式。
a：active-为正在单击的链接设置样式。

a:link {    /* 未被访问的链接   */
    color: #FF0000;
    text-decoration: none;
}
a:visited {    /* 被访问过的链接 */
    color: #00FF00;
}
a:hover {    /* 鼠标移到链接上 */
    color: #FF00FF;
    text-decoration: underline;
}
a:active {    /* 正在点击的链接  */
    color: #0000FF;
}

6.列表

1.样式类型

ul {
    list-style-type: square;
}
ol {
    list-style-type: upper-roman;
}

7.表格

table, th, td {
    border: 1px solid black;
}

8.轮廓

9.光标 cursor

CSS光标属性，用于在鼠标移至某个区域或网页上的链接时定义光标类型（即鼠标指针）。

h1 {
    cursor: move;
}
p {
    cursor: text;
}

10.溢出

11.尺寸

该CSS提供了几个属性，如width，height，max-width和max-height等，可以让您Box(盒子)的尺寸

div {
    width: 300px;
    height: 200px;
}

最大高度属性

div {
    height: 200px;
    max-height: 100px;
}

最小高度

div {
    height: 200px;
    min-height: 300px;
}

最大宽度-最小宽度

div {
    width: 300px;
    max-width: 200px;
    min-width: 400px;
}

12.单位

13.CSS视觉格式模型

14.display 显示

15.visibility可见性

16.position 定位

17.Layers层级

18.Float 浮动

19.Alignment 元素对其

20.Pseudo-classes 伪类

21.伪元素 Pseudo-elements

22.@media(媒体)

23.Sprites(精灵图)

24.Opacity(透明度)

25.line-height(行高)

<!DOCTYPE html>  
<html>  
<head>  
<style>  
h3.small {  
    line-height: 70%;  
}  
h3.big {  
    line-height: 200%;  
}  
</style>  
</head>  
<body>  
<h3>  
这是一个具有默认标准行间距的标题.<br>  
这是一个具有默认标准行间距的标题.<br>  
大多数浏览器中的默认行间距约为110％至120％.<br>  
</h3>  
<h3 class="small">  
这是一个行间距较小的标题.<br>  
这是一个行间距较小的标题.<br>  
这是一个行间距较小的标题.<br>  
这是一个行间距较小的标题.<br>  
</h3>  
<h3 class="big">  
这是一个具有较大行间距的标题.<br>  
这是一个具有较大行间距的标题.<br>  
这是一个具有较大行间距的标题.<br>  
这是一个具有较大行间距的标题.<br>  
</h3>  
</body>  
</html>

line-height属性值与CSS line-height属性需一起使用。

值	描述
normal	这是默认值。它指定法线高度。
number	它指定一个数字，该数字与当前字体大小相乘以设置行高。
length	它用于以px，pt，cm等设置行高。
%	它以当前字体的百分比指定行高。
initial	它将此属性设置为其默认值。
inherit	它从其父元素继承此属性。

5.盒子模型

1.盒子模型介绍

CSS Box模型

可以显示的每个元素都包含一个或多个矩形框。CSS框模型通常描述如何在网页上布置这些矩形框。这些框可以具有不同的属性，并且可以以不同的方式彼此交互，但是每个框都有一个内容区域以及可选的周围边距，边距和边框。

通常，当您使用CSS width和height属性设置元素的宽度和高度时，实际上，您只是在设置元素内容区域的宽度和高度。

箱体尺寸	CSS属性
总宽度	width+ padding-left+ padding-right+ border-left+ border-right+ margin-left+margin-right
总高度	height+ padding-top+ padding-bottom+ border-top+ border-bottom + margin-top+margin-bottom

2.外边距

您可以使用CSS个别margin属性轻松地为元素的不同侧（例如，顶部，右侧，底部或左侧）指定不同的外边距。

示例

h1 {margin-bottom: 20px;}
p {margin-left: 10px;margin-right: 30px;}

3.填充

CSS padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。

为各个面定义填充

您可以使用CSS单独的padding属性轻松地为元素的不同侧（例如，顶部，右侧，底部或左侧）指定不同的填充。

示例

h1 {
    padding-bottom: 10px;
}
p {
    padding-top: 20px;
    padding-left: 50px;
}

4.边框

border-width)边框宽度属性

border-width属性指定边框区域的宽度。下面是一种速记属性，用于同时设置元素边框的所有四个边的厚度。

示例

p {
    border-width: medium 10px thick 15px;
}

posted @ 2024-03-25 21:53 逆向狗阅读(0) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

AAASADAD

Css复习

Css复习

1.Css介绍入门

2.css语法

3.css选择器

This is a heading

4.属性

1.颜色属性

2.背景属性

3.字体

4.文本

5.链接

6.列表

7.表格

8.轮廓

9.光标 cursor

10.溢出

11.尺寸

12.单位

13.CSS视觉格式模型

14.display 显示

15.visibility可见性

16.position 定位

17.Layers层级

18.Float 浮动

19.Alignment 元素对其

20.Pseudo-classes 伪类

21.伪元素 Pseudo-elements

22.@media(媒体)

23.Sprites(精灵图)

24.Opacity(透明度)

25.line-height(行高)

5.盒子模型

1.盒子模型介绍

2.外边距

3.填充

4.边框

border-width)边框宽度属性

公告

AAASADAD

Css复习

Css复习

1.Css介绍 入门

2.css语法

3.css选择器

This is a heading

4.属性

1.颜色属性

2.背景属性

3.字体

4.文本

5.链接

6.列表

7.表格

8.轮廓

9.光标 cursor

10.溢出

11.尺寸

12.单位

13.CSS视觉格式模型

14.display 显示

15.visibility可见性

16.position 定位

17.Layers层级

18.Float 浮动

19.Alignment 元素对其

20.Pseudo-classes 伪类

21.伪元素 Pseudo-elements

22.@media(媒体)

23.Sprites(精灵图)

24.Opacity(透明度)

25.line-height(行高)

5.盒子模型

1.盒子模型介绍

2.外边距

3.填充

4.边框

border-width)边框宽度属性

公告

1.Css介绍入门