<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css1</title>
<--！<link rel="stylesheet" type="text/css" href="css/css_test1.css">-->
<style>
/*css基础*/
/*外部样式*/
body{
padding: 3px;
}
hr{
border:1px solid #00ffff;
}
h3{
color: green;
font-size: 24px;
text-align: left;
}
h4{
color: #008b8b;
font-size: 20px;
text-align: left;
}
h5{
color: #9932cc;
font-size: 18px;
text-align: left;
}
pre{
/*自动换行*/
white-space: pre-wrap;
word-wrap: break-word;
font-size: 16px;
}
#bgc1{
background-color: #2f4f4f;
padding: 2px;
}
.bgi1{
background-image: url("../image1/bg1.jpg");
/*水平repeat-x或垂直repeat-y平铺或不平铺no-repeat*/
background-repeat: repeat-x;
/*图像在背景中的位置*/
background-position: left top;
/*背景图像是否固定或者随着页面的其余部分滚动。*/
/*background-attachment: fixed;*/
}
#textalign1{
color: rgb(134,167,198);
text-align:left;
}
#td0{
text-decoration: none;
}
#td1{
text-decoration: overline;
color: #d4c892;
}
#td2{
text-decoration: line-through;
color: #d4c212;
}
#td3{
text-decoration: underline;
color: #111192;
}
#upppercase1{
text-transform: uppercase;
color: #1ff010;
}
#lowercase1{
text-transform: lowercase;
color: #230991;
}
#capitalize1{
text-transform: capitalize;
color: #9039d1;
}
#ti1{
text-indent: 40px;
color: #4d8fc1;
}
#ff1{
font-family: "Times New Roman",Times,serif;
}
#fs1{
font-style: normal;
}
#fs2{
font-style: italic;
}
#fs3{
font-style: oblique;
}
#fsize1{
font-size: 32px;
}
#fsize2{
font-size: 2em;
}
#link1{
color: #ff0000;
text-decoration: none;
background-color: #b3ff98;
}
#visited1{
color: #00ff00;
text-decoration: none;
}
#hover1{
color: #ff00ff;
text-decoration: none;
}
#active1{
color: #0000ff;
text-decoration: none;
}
.li1{
list-style-type: circle;
}
.li2{
list-style-type: square;
}
.li3{
list-style-type: upper-roman;
}
.li4{
list-style-type:lower-alpha;
}
table,th,td{
border: 1px solid #000000;
text-align: center;
vertical-align: bottom;
}
table{
/*border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开*/
border-collapse: collapse;
width: 100%;
}
th{
height: 50px;
background-color: #34b801;
}
td{
height: 40px;
padding: 5px;
background-color: #b8c01d;
}
caption{
font-size: 28px;
color: red;
padding-bottom: 3px;
caption-side: top;
}
#box1{
width: 300px;
height: 300px;
border: 10px groove #00ffff;
outline: 5px dashed #00ff00;
margin: 50px;
padding: 30px;
}
#display1{
visibility: hidden;
background-color: red;
}
#display2{
display: none;
}
#position1{
position: static;
border: 2px dotted #372198;
}
#position2{
position: fixed;
top: 30px;
left: 40px;
color: #ff1493;
}
#position3{
border: 5px inset #1e90ff;
height: 150px;
}
#position3_1{
position: relative;
left: 50px;
top: 30px;
width: 400px;
float: left;
background-color: #8cbb2d;
}
#position3_2{
position: relative;
right: 50px;
top: 30px;
width: 400px;
float: right;
background-color: #3bc905;
}
#position4_0{
border: 5px outset #c71585;
position: relative;
left: 10px;
top: 10px;
width: 800px;
height: 200px;
}
#position4{
border: 2px double #480092;
position: absolute;
left: 80px;
top: 20px;
width: 640px;
}
#position5{
position: -webkit-sticky; /*Safari*/
position: sticky;
border: 8px ridge #9acd32;
top: 2px;
background-color: #bb332c;
}
#cd0{
height: 200px;
}
.cd2{
position: absolute;
z-index: -1;
}
#overflow1{
border: 1px solid #def193;
width: 500px;
height: 100px;
overflow: scroll;
}
#float0{
width: 1000px;
height: 300px;
border: 1px dashed #346789;
}
#float1{
float: left;
width: 500px;
height: 200px;
background-color: #3dcd11;
}
#float2{
float: right;
width: 400px;
height: 200px;
margin-right: 50px;
}
#align0{
border: 3px solid #338cb1;
width: 80%;
margin: auto;
height: auto;
padding: 5px;
text-align: center;
overflow: auto;
}
#align1{
text-align: center;
}
#align2{
display: block;
margin: auto;
width:50%;
}
#align3{
position: absolute;
right: : 100px;
width: 500px;
border: 2px dashed #3876dc;
padding: 5px;
}
#align4_0{
float: right;
}
#align4{
float: right;
width: 500px;
border: 2px dashed #2877b1;
padding: 5px;
}
#align5{
padding: 40px 0;
width: 200px;
border: 2px solid #b8b2b1;
}
#align6{
line-height: 200px;
height: 200px;
border: 2px solid #3ffb19;
text-align: center;
}
#comp1{
border: 2px solid #d8761f;
width: 60%；
height:auto;
padding: 20px;
}
#comp1_1{
color: #887766;
}
#firstline1{
width: 600px;
height: auto;
}
#firstline1:first-line{
color: orange;
font-variant: small-caps;
}
#firstletter1:first-letter{
color: #76ffcd;
font-size: 40px;
}
#before1:before{
content: url(labels/8031/q8.png);
}
#after1:after{
content: url("labels/8031/q12.png");
}
</style>
</head>
<body>
<hr>
<h3>CSS语法</h3>
<pre>CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:选择器通常是您需要改变样式的HTML元素。每条声明由一个属性和一个值组成。属性 property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
</pre>
<hr>
<h3>CSS ID和Class选择器</h3>
<pre>id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。</pre>
<pre>class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。 class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：</pre>
<hr>
<h3>CSS 创建</h3>
<h4>插入样式表的方法有三种:</h4>
<h5>外部样式表(External style sheet)</h5>
<pre>当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 link 标签链接到样式表。link 标签在（文档的）头部.样式表应该以 .css 扩展名进行保存</pre>
<h5>内部样式表(Internal style sheet)</h5>
<pre>当单个文档需要特殊的样式时，就应该使用内部样式表。</pre>
<h5>内联样式(Inline style)</h5>
<pre>由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。 </pre>
<h4>多重样式优先级</h4>
<pre>一般情况下，优先级如下： 内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式</pre>
<pre>注意： 如果外部样式 link 放在内部样式的后面，则外部样式将覆盖内部样式。</pre>
<hr>
<h3>CSS 背景</h3>
<h4>背景颜色</h4>
<div id="bgc1">background-color:#2f4f4f</div>
<h4>背景图像</h4>
<div class="bgi1">
<pre>默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体. 背景颜色的简写属性为 "background"：当使用简写属性时，属性值的顺序为： background-color background-image background-repeat background-attachment background-position</pre>
</div>
<hr>
<h3>CSS 文本</h3>
<h4>文本颜色 color</h4>
<h4>文本的对齐方式 text-align</h4>
<div>
<p id="textalign1">文本排列属性是用来设置文本的水平对齐方式。 文本可居中或对齐到左或右,两端对齐. 当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。</p>
</div>
<h4>文本修饰 text-decoration</h4>
<div>
<p>text-decoration 属性用来设置或删除文本的装饰。 从设计的角度看 text-decoration属性主要是用来删除链接的下划线：</p>
<a href="#" id="td0">text-decoration:none;</a><br>
<a href="#" id="td1">text-decoration:overline;</a><br>
<a href="#" id="td2">text-decoration:line-through;</a><br>
<a href="#" id="td3">text-decoration:underline;</a><br>
</div>
<h4>文本转换</h4>
<div>
<p>文本转换属性是用来指定在一个文本中的大写和小写字母。 可用于所有字句变成大写或小写字母，或每个单词的首字母大写。</p>
<p id="upppercase1">text-transform: uppercase</p>
<p id="lowercase1">text-transform: lowercase</p>
<p id="capitalize1">text-transform: capitalize</p>
</div>
<h4>文本缩进</h4>
<div>
<p id="ti1">text-indent: 40px 文本缩进属性是用来指定文本的第一行的缩进。</p>
</div>
<hr>
<h3>CSS 字体</h3>
<div>
<p>CSS字体属性定义字体，加粗，大小，文字样式。</p>
<h4>CSS字型</h4>
<p>在CSS中，有两种类型的字体系列名称：</p>
<p>通用字体系列 - 拥有相似外观的字体系统组合（如 "Serif" 或 "Monospace"）
<p>特定字体系列 - 一个特定的字体系列（如 "Times" 或 "Courier"）</p>
<h4>字体系列</h4>
<pre>font-family 属性设置文本的字体系列。 font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。 注意: 如果字体系列的名称超过一个字，它必须用引号，如Font Family："宋体"。 多个字体系列是用一个逗号分隔指明：</pre>
<p id="ff1">font-family:"Times New Roman", Times, serif;</p>
<h4>字体样式</h4>
<p id="fs1">正常 - 正常显示文本: font-style:normal</p>
<p id="fs2">斜体 - 以斜体字显示的文字: font-style:italic</p>
<p id="fs3">倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）font-style:oblique</p>
<h4>字体大小</h4>
<p>字体大小的值可以是绝对或相对的大小。</p>
<p>如果你不指定一个字体的大小，默认大小和普通文本段落一样，是16像素（16px=1em）</p>
<p id="fsize1">设置字体大小像素32px=2em</p>
<p id="fsize2">用em来设置字体大小,1em和当前字体大小相等。在浏览器中默认的文字大小是16px。</p>
<p>在所有浏览器的解决方案中，设置 body {font-size:100%;}元素的默认字体大小的是百分比,在所有浏览器中，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小。</p>
</div>
<hr>
<h3>CSS链接</h3>
<a id="link1" href="#">a:link - 正常，未访问过的链接</a>
<a id="visited1" href="#">a:visited - 用户已访问过的链接</a>
<a id="hover1" href="#">a:hover - 当用户鼠标放在链接上时</a>
<a id="active" href="#">a:active - 链接被点击的那一刻</a>
<hr>
<h3>CSS列表</h3>
<ul>
<li>无序列表 - 列表项标记用特殊图形（如小黑点、小方框等）</li>
<li class="li1">list-style-type: circle</li>
<li class="li2">list-style-type: square</li>
</ul>
<ol>
<li>有序列表 - 列表项的标记有数字或字母</li>
<li class="li3">list-style-type: upper-roman</li>
<li class="li4">list-style-type:lower-alpha</li>
</ol>
<hr>
<h3>CSS表格</h3>
<table>
<caption>Empolyee Information</caption>
<tr>
<th>Name</th>
<th>Age</th>
<th>Sex</th>
</tr>
<tr>
<td>Gini</td>
<td>29</td>
<td>男</td>
</tr>
<tr>
<td>Mane</td>
<td>28</td>
<td>男</td>
</tr>
</table>
<hr>
<h3>CSS盒子模型</h3>
<div id="box1">
CSS 盒子模型(Box Model):<br>
CSS 边框
CSS 轮廓（outline）
CSS margin(外边距)
CSS padding（填充）
</div>
<hr>
<h3> CSS 显示</h3>
<p id="display1">visibility:hidden</p>
<p>visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。</p>
<p id="display2">display:none</p>
<p>display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。</p>
<hr>
<h3> CSS 定位</h3>
<h4>static 定位</h4>
<div id="position1">
HTML 元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。
</div>
<h4>fixed 定位</h4>
<div id="position2">
position: fixed;元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动.Fixed定位使元素的位置与文档流无关，因此不占据空间。Fixed定位的元素和其他元素重叠。
</div>
<h4>relative 定位</h4>
<div id="position3">
<div id="position3_1">
相对定位元素的定位是相对其正常位置。移动相对定位元素，但它原本所占的空间不会改变。相对定位元素经常被用来作为绝对定位元素的容器块。
</div>
<div id="position3_2">
相对定位元素的定位是相对其正常位置。移动相对定位元素，但它原本所占的空间不会改变。相对定位元素经常被用来作为绝对定位元素的容器块。
</div>
</div>
<h4>absolute 定位</h4>
<div id="position4_0">
<div id="position4">
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于html.absolute 定位使元素的位置与文档流无关，因此不占据空间。absolute 定位的元素和其他元素重叠。
</div>
</div>
<h4>sticky 定位</h4>
<div id="position5">
sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。 position: sticky; 基于用户的滚动位置来定位。 粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。 它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。 元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。 这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。 Safari 需要使用 -webkit- prefix .
</div>
<h4>重叠的元素</h4>
<div id="cd0">
<h6 class="cd1">如何显示堆叠元素,因为图像元素设置了 z-index 属性值为 -1, 所以它会显示在文字之后</h6>
<img src="image2/img10.jpg" class="cd2">
<p>元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素.z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面） 一个元素可以有正数或负数的堆叠顺序.具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。 注意： 如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。</p>
</div>
<br>
<hr>
<h3>CSS 布局 - Overflow</h3>
<div id="overflow1">
visible 默认值。内容不会被修剪，会呈现在元素框之外。 hidden 内容会被修剪，并且其余内容是不可见的。 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 inherit 规定应该从父元素继承 overflow 属性的值。
</div>
<hr>
<h3> CSS 浮动</h3>
<div id="float0">
<div id="float1">
元素怎样浮动 元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。 一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 浮动元素之后的元素将围绕它。 浮动元素之前的元素将不会受到影响。 清除浮动 - 使用 clear 元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。 clear 属性指定元素两侧不能出现浮动元素。
</div>
<img src="image2/img9.jpg" id="float2">
</div>
<br>
<hr>
<h3>CSS 对齐</h3>
<div id="align0">
<h4>文本居中对齐</h4>
<p id="align1">如果仅仅是为了文本在元素内居中对齐，可以使用 text-align: center;</p>
<h4>图片居中对齐</h4>
<p id="align1">要让图片居中对齐, 可以使用 margin: auto; 并将它放到 块 元素中</p>
<img id="align2" src="image2/img8.jpg">
<h4>左右对齐 - 使用定位方式</h4>
<p id="align3">可以使用 position: absolute; 属性来对齐元素,绝对定位元素会被从正常流中删除，并且能够交叠元素。当使用 position 来对齐元素时, 通常 body 元素会设置 margin 和 padding 。 这样可以避免在不同的浏览器中出现可见的差异。</p>
<br>
<h4 id="align4_0">左右对齐 - 使用 float 方式</h4>
<br>
<p id="align4">如果子元素的高度大于父元素，且子元素设置了浮动，那么子元素将溢出，这时候你可以使用 "clearfix(清除浮动)" 来解决该问题。 我们可以在父元素上添加 overflow: auto; 来解决子元素溢出的问题</p>
<br>
<h4>垂直居中对齐 - 使用 padding</h4>
<p id="align5">CSS 中有很多方式可以实现垂直居中对齐。一个简单的方式就是头部顶部使用 padding</p>
<h4>垂直居中 - 使用 line-height</h4>
<p id="align6">垂直居中 - 使用 position 和 transform 除了使用 padding 和 line-height 属性外,我们还可以使用 transform 属性来设置垂直居中</p>
</div>
<hr>
<h3>CSS 组合选择符</h3>
<div id="comp1">
<p>组合选择符说明了两个选择器直接的关系。</p>
<p>CSS组合选择符包括各种简单选择符的组合方式。在 CSS3 中包含了四种组合方式:</p>
<ul>
<li id="comp1_1">后代选择器(以空格分隔) div p</li>
<p>后代选择器用于选取某元素的后代元素。</p>
<li id="comp1_1">子元素选择器(以大于号分隔） div>p</li>
<p>与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。</p>
<li id="comp1_1">相邻兄弟选择器（以加号分隔） div+p</li>
<p>相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。</p>
<li id="comp1_1">普通兄弟选择器（以破折号分隔） div~p</li>
<p>后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。</p>
</ul>
</div>
<hr>
<h3>CSS 伪类(Pseudo-classes)</h3>
<p>CSS伪类是用来添加一些选择器的特殊效果。</p>
<p>伪类可以与 CSS 类配合使用</p>
<h3>CSS 伪元素</h3>
<h4>:first-line 伪元素</h4>
<p id="firstline1">"first-line" 伪元素用于向文本的首行设置特殊样式。注意："first-line" 伪元素只能用于块级元素。
注意： 下面的属性可应用于 "first-line" 伪元素：
font properties
color properties
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear
</p>
<h4>:first-letter 伪元素</h4>
<p id="firstletter1">first-letter 伪元素用于向文本的首字母设置特殊样式：</p>
<h1>1</h1>
<h4>CSS - :before 伪元素</h4>
<p id="before1">":before" 伪元素可以在元素的内容前面插入新内容。</p>
<h4>CSS - :after 伪元素</h4>
<p id="after1">":after" 伪元素可以在元素的内容之后插入新内容。</p>
<br><br><br><br>
</body>
</html>
css基础学习1
最新推荐文章于 2024-07-12 14:38:32 发布
2337
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
