目录
- CSS常用样式
- 0.0其他内容
- 1.0css介绍
- 2.0样式表类型
- 2.1嵌入样式表
- 2.2外部样式
- 2.3内联样式
- 3.0样式选择器
- 3.1标签选择器
- 3.2类选择器
- 3.3id选择器(唯一选择)
- 3.4通配符选择器
- 3.5群组和后代选择器
- 3.6伪类选择器
- 4.0背景
- 4.1background-xxx属性
- 4.2简写
- 5.0边框
- 5.1border-xxx属性
- 5.2简写
- 6.0文字属性
- 7.0文本属性
- 8.0列表
- 9.0超链接
- 10.盒子模型
- 10.1介绍
- 10.2padding
- 10.3 margin
- 11.0元素定位position
- 11.1介绍
- 11.2属性
- 11.3使用技巧
- 12.0块级元素(block)、行内元素(inline)
- 12.1介绍
- 12.2block
- 12.3inline
- 12.4属性
CSS常用样式
完整内容参考https://www.w3school/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">百度</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 默认值。元素是可见的。
更多推荐
【网络空间安全】2.1CSS学习-基础样式
发布评论