html css 样式表
2021-05-03 11:29
标签：层叠样 show jpg 自定义 play isp 出现 浏览器 大写 html css 样式表 标签：层叠样 show jpg 自定义 play isp 出现 浏览器 大写 原文地址：https://www.cnblogs.com/ham-731/p/12121843.html1.层叠样式表：
2.选择器：
*{ }
p{ }
input[type=text]{ }
.foo{ }
#bar{ }
~ 后代：p h1
~ 父子：p>h1
~ 兄弟：p~h1
~ 相邻兄弟：p+h1p h1{ }
p>h1{ }
p~h1{ }
p+h1{ }3.三条原则：
p {
background: red !important;
}
4.常用属性：
p {
color: red;
color: #000000;
color: rgb(0,0,0);
color: rgba(111,111,111,0.5); /* 0.5是透明度 */
color:hsla(120,65%,75%,0.3); /* HSL（色调，饱和度，明度）。色相是在色
轮上的程度（从0到360）-0（或360）是红色的，120是绿色的，240是蓝色的。饱和度是一个百分比值;0％意味着灰色和100％的阴影，是全彩。亮度也是一个百分点;0％是黑色的，100％是白色的。
α是Alpha参数定义的不透明度。 Alpha参数是一个介于0.0（完全透明）和1.0（完全不透明）之间的参数。 */
}
name
作用
height
设置元素的高度
max-height
max-width
min-height
min-width
width
@font-face { /* 加载本地字体加载后命名为fatdog*/
font-family:fatdog;
src: url(fonts/chunkfive.ttf);
}
h3{
text-transform: uppercase; /* 字母大写 */
font-family: fatdog; /* 使用字体fatdog*/
}
body {
font-size: 80%;
font-family: "Courier New", Courier, monospace;
}
text-align:right; /* center居中;left左对齐; */
line-height:20px; /* 行高 */
text-decoration:underline; /* none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
blink 定义闪烁的文本。 */
letter-spacing: -3px ; /*字符间距 */
vertical-align /*
baseline 默认。元素放置在父元素的基线上。
sub 垂直对齐文本的下标。
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 把元素的底端与行中最低的元素的顶端对齐。
text-bottom 把元素的底端与父元素字体的底端对齐。
length
% 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值 */
border:5px solid red;
border-style:dotted solid double dashed;
/* 上边框是点状
右边框是实线
下边框是双线
左边框是虚线 */
outline:green dotted thick;
/* thin 规定细轮廓。
medium 默认。规定中等的轮廓。
thick 规定粗的轮廓。
length 允许您规定轮廓粗细的值。 */
list-style-type:none;/*
none 无标记。
disc 默认。标记是实心圆。
circle 标记是空心圆。
square 标记是实心方块。
decimal 标记是数字。
decimal-leading-zero 0开头的数字标记。(01, 02, 03, 等。)
lower-roman 小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman 大写罗马数字(I, II, III, IV, V, 等。) */
list-style-image:url('sqpurple.gif');
list-style-position: inside;
/*inside 列表项目标记放置在文本以内，且环绕文本根据标记对齐。
outside 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。*/
table
{
border-collapse:separate;
border-spacing:10px 50px;
}
/*border-spacing:0; 可以用来合并边框效果超好 */
/*collapse 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性
separate 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性*/
empty-cells:hide;
/*empty-cells 属性设置是否显示表格中的空单元格（仅用于"分离边框"模式）。
hide 不在空单元格周围绘制边框。
show 在空单元格周围绘制边框。默认。
*/
table-layout:fixed;
/*automatic 默认。列宽度由单元格内容设定。
fixed 列宽由表格宽度和列宽度设定。*/
#img1{
display: inline-block;
width: 100px;
height: 100px;
background-image: url(images/icons.jpg);
background-repeat: no-repeat no-repeat;
background-position: -150px -80px;
}
#page {
margin: 10px auto 10px auto;
padding: 20px;
z-index:10; 图层可以是负数 值大的会覆盖值小的
float: left ;
clear:both;/*
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。*/
h2
{
position:absolute;
left:100px;
top:150px;
}
/* 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
absolute生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
fixed 生成固定定位的元素，相对于浏览器窗口进行定位。
relative生成相对定位的元素，相对于其正常位置进行定位。
因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
sticky粘性定位，该定位基于用户滚动的位置。
*/
/* 隐藏 不占位置 */
display: none ;
/* 隐藏 占位置 */
visibility: hidden;
/* visibility: inherit; */
cursor:wait;/*
url 需使用的自定义光标的 URL。
注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。
default 默认光标（通常是一个箭头）
auto 默认。浏览器设置的光标。
crosshair 光标呈现为十字线。
pointer 光标呈现为指示链接的指针（一只手）*/
5.伪类/伪元素
:first-letter 首字符
:first-line 首行
input:focus /* 输入框获得焦点,背景颜色改为黄色*/
{
background-color:yellow;
}
a:hover 鼠标移到链接上的样式
visited选择器样式链接到你已经访问过的页面。
active选择器样式触发时链接到链接页面