前端基础css（二）
2021-04-07 14:28
标签：order play hit eee 划线 pac 元素选择器 none 12px HTML:用于显示页面的内容 CSS：用于以什么样的形式（样式）去显示 【1】 标签/元素选择器 (整个页面的所有的相同的标签都显示统一的样式) 【2】 类选择器 (统一的样子中，N多特殊的样式) 【3】 id选择器( 样式唯 一) 【4】 * 页面中所有的标签 【5】 复合选择器 (页面上所有div,ul,p都去掉外间距(margin)) 【6】 子选择器 (直接的儿子及孙子。。。) 【7】 子选择器 (直接的子元素) 1、字体的样式 2、块级元素常的样式 3、字体: 4、文本: 5、背景: 6、定位: 7、布局 [4]盒子模型 margin:元素与元素之间的间距 padding：边框与内容之间的间距 border：边框 优先级:内嵌>内联>外部 优先级: id选择器>类选择器>元素/标签选择器 属性选择器: text-decoration: (none, underline(下划线),overline(上划线),line-through(删除线)) letter-spacing: 字与字之间的间距 line-height: 行与行之间的间距 font-size:字体大小 color:字体的颜色 font-weight:字体的粗细 注意事项:line-height与height值相同，文字/图片 垂直居中 前端基础css（二） 标签：order play hit eee 划线 pac 元素选择器 none 12px 原文地址：https://www.cnblogs.com/vole/p/12486245.html一、 选择器
h1{
font-size: 20px; 字体大小
color: red; 字体颜色
font-family: "楷体"; 字体样式
}
style type=”text/css”>
.blue{
color: blue;
}
style>
h1 class="blue">寂寞沙州冷h1>
style type=”text/css”>
#ticket{
font-size: 40px;
color: green;
}
12306网站
*{
margin: 0px; /**元素元素之间的空白（间距）*/
}
div,ul,p{ margin: 0px;}
div>
p>这一个div相当于一张透明的张p>
p>这一个div相当于一张透明的张p>
span>
p>span中的pp>
p>span中的pp>
span>
div>
div p{
color: #000;
font-size: 20px;
}
div>p{
color: #000;
font-size: 20px;
}
二、样式
【1】 font-size: 字体大小
【2】 font-weight:字体粗细
【3】 color:字体的颜色
【4】 font-style:字体样式 倾斜
【5】 font :bold 12px/20px “黑体“;
【1】 width:宽
【2】 height:高
【3】 background-color:背影色
【4】 border:1px solid red;
text-decoration: (none, underline(下划线),overline(上划线),line-through(删除线))
letter-spacing: 字与字之间的间距
line-height: 行与行之间的间距
font-size:字体大小
color:字体的颜色
font-weight:字体的粗细
注意事项:line-height与height值相同，文字/图片 垂直居中
text-align (left,center,right)文本的水平对齐方式
mso-char-indent-count:1.0">background-image:
background-position:平移方式
background-repeat:平铺方式 (no-repeat,repeat, repeat-x,repeat-y)
【1】position
(1) position: absolute; 绝对定位(浏览器的左上角)
top:100px;
left:300px;
(2)相对定位 （相于原来的位置）
position: relative;
top:100px;
left:200px;
(3)固定定位
position:fixed;
top:100px;
left:10px;
【2】z-index
z-index: 它的值大在上面，值小在下面
z-index: 30;
[1]float: (left,right)
[2]clear:both
[3]display: block (行>块) /inline(块->行)
a:hover{
background-color: #eee;
color:#ff7300;
width:100px;
height:35px;
line-height: 35px;
display:block;
/*visibility: hidden;*/
text-align: center;
}
三、样式的使用方式
【1】 内嵌样式 直接写在标签中h2 style=”color:red;”>h2>
【2】 内联样式 style>………style>
【3】 外部样式 link rel="stylesheet" type="text/css" href="css/css_01.css"/>
link rel="shortcut icon" type="image/x-icon" href="https://www.baidu.com/favicon.ico" />
input[type=text]{
border:1px solid blue;
width:300px;
height:30px;
}