【网络空间安全】2.1CSS学习-基础样式

翎澄羚

已于 2022-12-13 22:34:35 修改

阅读量380

点赞数

文章标签： css 学习

于 2022-12-13 02:13:42 首次发布

本文链接：https://blog.csdn.net/qq_47791770/article/details/128276665

版权

CSS常用样式

完整内容参考https://www.w3school.com.cn/css/index.asp

0.0其他内容

/* */ 为注释内容

1.0css介绍

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

2.0样式表类型

2.1嵌入样式表

在html文件中使用<style>标签插入css语句

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div class="demo1">
			demo1
		</div>
	</body>
</html>
<style>
	.demo1{
		color: red;
		width: 100px;
		height: 100px;
		background: blue;
	}
</style>

2.2外部样式

在另一个页面创建css文件，通过<link/>标签在html页面中引入css

<link rel="stylesheet" href="css/style.css"/>
@import url
@import url("g.css");
.demo1{
		color: red;
		width: 100px;
		height: 100px;
		background: blue;
}

<link/>与@import都能在css中引入另一个css文件，从而使html文件中只需要引入一个css文件，通常在html中使用<link/>标签。
<link/>标签先加载CSS，后加载HTML
@import先加载HTML，后加载CSS

rel各个属性值配置的意思：

Alternate – 定义交替出现的链接
Stylesheet – 定义一个外部加载的样式表
Start – 通知搜索引擎,文档的开始
Next – 记录文档的下一页.(浏览器可以提前加载此页)
Prev – 记录文档的上一页.(定义浏览器的后退键)

2.3内联样式

直接在div标签中添加style属性进行样式搭建

<div style="color: blue;width: 100px;height: 100px; background: black;">demo2</div>

3.0样式选择器

在定义一个统配选择器后，通常使用类选择器与id选择器

3.1标签选择器

div{
 
    }

3.2类选择器

当一个标签被赋予多个类时，执行顺序为style标签的执行顺序

<style>
	.one{
		color: yellow;
	}
	.two{
		color: blue;
	}
</style>
<body>
	<div class="two one">1111111111</div>//结果为蓝色
	<div class="one two">2222222222</div>//结果为蓝色
</body>

3.3id选择器(唯一选择)

<style>
	#one{
		color: yellow;
	}
</style>
<body>
	 <div id="one">1111111111</div>
</body>

3.4通配符选择器

在未定义的所有标签中适用

    *{//所有元素，边距清0
	   margin:0;
       padding:0;
    }

3.5群组和后代选择器

<!--群组-->
    div,.box,p{
 
    }
<!--后代-->
    div p{//div下的p标签
 
    }

3.6伪类选择器

<style>
            /*顺序为link-visited-hover-active*/
            /*初始状态*/
            a:link{
                color: yellow;
            }
            /*访问之后*/
            a:visited{
                color: red;
            }
            /*鼠标悬停*/
            a:hover{
                color: orange;
            }
            /*点击激活*/
            a:active{
                color: green;
            }
</style>
<body>
        <a href="http://www.baidu.com">百度</a>
</body>

4.0背景

4.1background-xxx属性

background-color 规定要使用的背景颜色，颜色通常由以下方式指定：
有效的颜色名称 - “red”
十六进制值 - “#ff0000”
RGB 值 - “rgb(255,0,0)”
opacity- “0.3”
使用 opacity 属性为元素的背景添加透明度时，其内所有元素，子元素，背景，文字等都继承相同的透明度；这可能会使完全透明的元素内的文本难以阅读。
使用 RGBA 的透明度-“rgba(0, 128, 0, 0.3)”
background-image 规定要使用的背景图像。使用url引入
background-image: url(bgimage.gif);
background-position规定背景图像的位置。这个属性设置背景原图像（由 background-image 定义）的位置，背景图像如果要重复，将从这一点开始。

值	描述
left top	如果您仅规定了一个关键词，那么第二个值将是"center"
left center	默认0%，0%
left bottom
right top
right center
right bottom
center top
center center
center bottom
x% y%	第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅规定了一个值，另一个值将是 50%。
xpos ypos	第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果您仅规定了一个值，另一个值将是50%。您可以混合使用 % 和 position 值。

background-size 规定背景图片的尺寸。
x% y% -第一个值是水平位置，第二个值是垂直位置
xpos ypos -第一个值是水平位置，第二个值是垂直位置。
cover -使背景图像完全覆盖背景区域,图像不变形
contain -以使其宽度或高度完全适应内容区域，图像不变形
background-repeat 规定如何重复背景图像。
repeat 默认。 -背景图像将在垂直方向和水平方向重复。
repeat-x -背景图像将在水平方向重复。
repeat-y -背景图像将在垂直方向重复。
no-repeat -背景图像将仅显示一次。
inherit -规定应该从父元素继承 background-repeat 属性的设置。
background-origin 规定 background-position 属性相对于什么位置来定位。主要为背景图片的定位区域。如果背景图像的 background-attachment 属性为 “fixed”，则该属性没有效果
padding-box -背景图像相对于内边距框来定位。
border-box -背景图像相对于边框盒来定位。
content-box -背景图像相对于内容框来定位。
background-attachment 规定背景图像是否固定或者随着页面的其余部分滚动。
scroll -默认值。背景图像会随着页面其余部分的滚动而移动。
fixed -当页面的其余部分滚动时，背景图像不会移动。
inherit -规定应该从父元素继承 background-attachment 属性的设置。
background-clip 规定背景的绘制区域。
border-box 背景被裁剪到边框盒。
padding-box 背景被裁剪到内边距框。
content-box 背景被裁剪到内容框。

4.2简写

background: url(images/bg.gif) no-repeat top right

5.0边框

5.1border-xxx属性

border-color:#000边框颜色
border-width:1px边框宽度
border-left 设置左边框，一般单独设置左边框样式使用
border-right 设置右边框，一般单独设置右边框样式使用
border-top 设置上边框，一般单独设置上边框样式使用
border-bottom 设置下边框，一般单独设置下边框样式使用,有时可将下边框样式作为css下划线效果应用。
border或border-xx边框样式值如下：
none : 　无边框。与任何指定的border-width值无关
hidden : 　隐藏边框。IE不支持
dotted : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线（常用）
dashed : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线（常用）
solid : 　实线边框（常用）
double : 　双线边框。两条单线与其间隔的和等于指定的border-width值
搞不懂的3d边框？
groove : 　根据border-color的值画3D凹槽
ridge : 　根据border-color的值画菱形边框
inset : 　根据border-color的值画3D凹边
outset : 　根据border-color的值画3D凸边

5.2简写

border:5px solid red;

6.0文字属性

一般在<font></font>中使用

color:red; 或#ffeeees文字颜色
font-size:12px; 文字大小
font-weight:bolds 文字粗细
(bold/normal)
font-family:”宋体”文字字体
font-variant:small-caps小写字母以大写字母显示

7.0文本属性

一般在<p></p>中使用

text-align:center; 文本对齐(right/left/center)
line-height:10px; 行间距(可通过它实现文本的垂直居中)
text-indent:20px; 首行缩进
text-decoration:none;文本线(none:无/underline:下划线/overline:上划线/line-through:中划线)
letter-spacing: 字间距

8.0列表

list-style-type -设置列表项标记的类型
none 无标记
disc 默认。标记是实心圆
circle 标记是空心圆
square 标记是实心方块
decimal 标记是数字
decimal-leading-zero 0开头的数字标记(01, 02, 03)
inherit 规定应该从父元素继承 list-style 属性的值
list-style-position 设置在何处放置列表项标记
inside 列表项目标记放置在文本以内(占据文本位置)，且环绕文本根据标记对齐。
outside 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外（不占据文本位置)，且环绕文本不根据标记对齐。
inherit 规定应该从父元素继承 list-style-position 属性的值。
list-style-image 使用图像来替换列表项的标记。参阅：list-style-image 中可能的值。
URL 图像的路径。
none 默认。无图形被显示。
inherit 规定应该从父元素继承 list-style-image 属性的值。

9.0超链接

a{text-decoration: none;}
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

10.盒子模型

10.1介绍

盒子模型的组成部分：外边距margin（与其他盒子的距离）、边框border（盒子边框）、内边距padding、内容content四个属性
盒子整体自身的身高： width height

10.2padding

当设置内边距的时候会把盒子撑大，为了保持盒子原来的大小，应该高度和宽度进行减小，根据width和height减小

padding:内边距
值：px|cm|%
上下左右 padding:10px;
上下左右 padding:10px 10px;
上左右下 padding:10px 10px 10px;
上右下左 padding:10px 10px 10px 10px; （设置4个点–>顺时针方向）
单独属性
padding-top:
padding-right:
padding-bottom:
padding-left:

10.3 margin

与padding相同
margin:0px auto; 居中

外边距合并：两个盒子同时设置了外边距，会进行一个外边距合并

11.0元素定位position

11.1介绍

position这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

11.2属性

absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。—做弹窗广告用到
relative 生成相对定位的元素（参照物以他本身），相对于其正常位置进行定位。因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。
static 默认值。没有定位，元素出现在正常的流中（不对它的位置进行改变，在哪里就在那里。忽略 top, bottom, left, right 或者 z-index
声明）。
inherit 规定应该从父元素继承 position 属性的值。
z-index设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

11.3使用技巧

定位的基本思想: 它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

12.0块级元素（block）、行内元素（inline）

12.1介绍

display 属性是用于控制布局的最重要的 CSS 属性。每个 HTML 元素都有一个默认的 display 值，具体取决于它的元素类型。大多数元素的默认 display 值为 block 或 inline

12.2block

块级元素总是从新行开始，占据可用的全部宽度。

12.3inline

内联元素不从新行开始，仅占用所需的宽度。

12.4属性

通过将 display 属性设置为 none 可以隐藏元素。该元素将被隐藏，不影响布局；
通过将 visibility属性设置为 hidden也可以隐藏元素。该元素仍将占用与之前相同的空间。元素将被隐藏，但仍会影响布局。

display
none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 此元素会被显示为内联元素，元素前后没有换行符。
inline-block 行内块元素。（CSS2.1 新增的值）
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
table 此元素会作为块级表格来显示（类似 table），表格前后带有换行符。
inline-table 此元素会作为内联表格来显示（类似 table），表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示（类似 tbody）。
table-header-group 此元素会作为一个或多个行的分组来显示（类似 thead）。
table-footer-group 此元素会作为一个或多个行的分组来显示（类似 tfoot）。
table-row 此元素会作为一个表格行显示（类似 tr）。
table-column-group 此元素会作为一个或多个列的分组来显示（类似 colgroup）。
table-column 此元素会作为一个单元格列显示（类似 col）
table-cell 此元素会作为一个表格单元格显示（类似 td>和 th）
table-caption 此元素会作为一个表格标题显示（类似 caption）
inherit 规定应该从父元素继承 display 属性的值。
visibility
hidden 元素是不可见的。
visible 默认值。元素是可见的。