Day-2-CSS

最新推荐文章于 2024-09-16 06:30:00 发布
Aurora.墨玖
最新推荐文章于 2024-09-16 06:30:00 发布
阅读量103
点赞数 3
文章标签：前端
本文链接：https://blog.csdn.net/weixin_54911224/article/details/139157631
版权
<! DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>MJ</title>
<style>
body
{
    background-image: url(/I/v2-3354083dc0618c22c823fe2f357b461a_r.jpg);/*背景采用该图片*/
    background-color: #cccccc;/*背景颜色*/
    background-repeat:repeat-y;/*只竖直方向平铺*/
    background-size: cover;/*使图片铺满*/
}
p.dashed /*实线边框*/
{
    border-style: dashed
}
ul.a/*无序列表*/
{
    list-style-type:disc;/*点*/
}
ul.b/*无序列表*/
{
    list-style-type: square;/*正方形*/
}
ul.c/*有序列表*/
{
    list-style-type: decimal;/*数字*/
}
h1 /*大标题*/
 {
     color: black;/*字体颜色*/
     text-align: center;/*位置居中*/
 }
h3/*章节标题*/
{
    color: darkblue;/*字体颜色*/
    justify-content: flex-start;/*靠左*/
}
h4/*章节小标题*/
{
    color: aquamarine;/*字体颜色*/
    text-indent:1em;/*首行缩进两格*/
}
h5/*举例*/
{
    color: cyan;/*字体颜色*/
    text-indent:2em;/*首行缩进两格*/
}
h6/*列举小标题*/
{
    color: darkcyan;/*字体颜色*/
    text-indent:3em;/*首行缩进两格*/
    font-size:16;/*字体大小*/
}
p/*段落*/
{
    text-indent:2em;/*首行缩进两格*/
}
#h51/*章内小标题*/
{
    color: red;/*字体颜色*/
}
#h16/*总结用*/
{
    color: blueviolet;/*字体颜色*/
    font-size:18;/*字体大小*/
}
#h53/*文章中标注重点词*/
{
    color: forestgreen;/*字体颜色*/
}
pre/*代码展示*/
 {
     background-color:rgba(alpha);/*背景颜色*/
     color: black;/*字体颜色*/
 }
 a:link {color:sandybrown}/*未访问链接时*/
 a:visited {color: red}/*已访问链接*/
 a:hover {color: cyan}/*鼠标移动到上方时*/
 a:active {color: chartreuse}/*鼠标点击时*/

 a:link {text-decoration: none}/*未访问链接时*/
 a:visited {text-decoration: none}/*已访问链接*/
 a:hover {text-decoration: underline}/*鼠标移动到上方时*/
 a:active {text-decoration: underline}/*鼠标点击时*/
 /*color；控制链接字体颜色*/
 /*text-decoration;控制下划线的开启与关闭*/
</style>
</head>
<body>
<h1>
    开发日志 Day2
</h1>
<h3>
   1 CSS
</h3>
<P>
    <a id="h53">CSS (Cascading Style Sheets，层叠样式表）</a>。是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距
    和颜色等）的计算机语言。（<a id="h53">简单来说，CSS可以使HTML更加美观,还可以配合各种脚本语言动态对网页各元素进行格式化</a> ）
</P>
<p>
    CSS 规则由两个主要的部分构成：<a id="h53">选择器，以及一条或多条声明.选择器通常是您需要改变样式的 HTML 元素</a>。 每条声明由一个属性和一个
    值组成.属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开.选择器通常是您需要改变样式的 HTML
    元素每条声明由一个属性和一个值组成。属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开.CSS声明
    总是以分号 ; 结束，声明总以大括号 {} 括起来。CSS注释以 /* 开始, 以 */ 结束。
<h4>
    1.1 CSS 三种方式
</h4>
<h6>
    嵌入样式表
</h6>
<pre><code>
        <!DOCTYPE html>
    html
	    head
		    meta charset="UTF-8"
		    title)(/title
		    style>
			    .demo1
                    {
                    color: red;
                    width: 100px;
                    height: 100px;
                    background: blue;
                    }

		    /style>
	/head>
</pre></code>
<h6>
    外部样式表
</h6>
<pre><code>
    （link rel="stylesheet" href="css/style.css"/）

        @import url
        @import url("g.css");
    .demo1{
				color: red;
				width: 100px;
				height: 100px;
				background: blue;
			}

</code></pre>
<h6>
    内联样式表
</h6>
<pre><code>
    (div style="color: blue;width: 100px;height: 100px; background: black;">demo2（/div)
</pre></code>
<h3>
    2 CSS的使用
</h3>
<p>
    前面说过；CSS可以使HTML更加美观。所以使用修饰HTML标签中的文本，链接，背景等。
</p>
<h4>
    2.1文本
</h4>
<P>
    可以使用CSS进行文本属性的编辑，例如<a id="h51">text-align:center; 文本对齐(right/left/center)</a>,
    <a id="h51">text-indent:20px; 首行缩进</a>,
</P>
<pre><code>
h1 /*标题属性*/
 {
     color: black;/*颜色*/
     text-align: center;/*位置居中*/
 }
h3/*章节小标题*/
{
    color: darkblue;
    justify-content: flex-start;/*靠左*/
}
p/*段落*/
{
    text-indent:2em;text-indent:/*首行缩进两格*/
}
h5/*举例*/
{
    color: aqua;/*颜色*/
    text-indent:2em;text-indent:/*首行缩进两格*/
}</pre></code>
<a id="h16">总结</a>
<p>
    <a id="h51">对于文本的位置，间距等可以依靠：</a>
    <br>&emsp;&emsp;&emsp;&emsp;text-align:center;文本对齐(right/left/center)
    <br>&emsp;&emsp;&emsp;&emsp;line-height:12px;行间距(可通过它实现文本的垂直居中)
    <br>&emsp;&emsp;&emsp;&emsp;text-indent:2px;首行缩进
    <br>&emsp;&emsp;&emsp;&emsp;text-decoration:none;文本线(none/underline/overline/line-through)
    <br>&emsp;&emsp;&emsp;&emsp;underline/overline/line-through; 定义文本上的下划线/上划线/中划线
    <br>&emsp;&emsp;&emsp;&emsp;letter-spacing:字间距
    <br>&emsp;&emsp;&emsp;&emsp;br-文本换行
    <br>&emsp;&emsp;<a id="h51">而对于文字的颜色，大小等可以依靠：</a>
    <br>&emsp;&emsp;&emsp;&emsp;color:red; 文字颜色 #ffeeees
    <br>&emsp;&emsp;&emsp;&emsp;font-size:12px; 文字大小
    <br>&emsp;&emsp;&emsp;&emsp;font-weight:bolds 文字粗细(bold/normal)
    <br>&emsp;&emsp;&emsp;&emsp;font-family:”宋体”文字字体
    <br>&emsp;&emsp;&emsp;&emsp;font-variant:small-caps小写字母以大写字母显示
</p>
<h4>
    2.2列表
</h4>
<P>
    <a id="h51">列表的用处CSS：</a>
<ul class="a">
     <li>设置不同的列表项标记为有序列表(例如26字母为序，数字为序)</li>
     <li>设置不同的列表项标记为无序列表(例如点，圈等)</li>
     <li>设置列表项标记为图像</li>
</ul>
</P>
<a id="h16">总结</a>
<p>
<ul class="b">
    <li>list-style-type;设置列表项标记的类型。</li>
    <li>list-style-position;设置在何处放置列表项标记。</li>
    <li>list-style-image;使用图像来替换列表项的标记。</li>
    <li>inherit;规定应该从父元素继承 list-style 属性的值.</li>
</ul>
<a id="h51">取值</a>
<ul class="c">
    <li>disc:点</li>
    <li>circle: 圆圈</li>
    <li>square: 正方形</li>
    <li>decimal: 数字</li>
    <li>decimal-leading-zero: 十进制数，不足两位的补齐前导0，例如: 01, 02, 03, ..., 98, 99</li>
    <li>lower-roman: 小写罗马文字，例如: i, ii, iii, iv, v, ...</li>
    <li>upper-roman: 大写罗马文字，例如: I, II, III, IV, V, ...</li>
    <li>lower-greek: 小写希腊字母，例如: α(alpha), β(beta), γ(gamma), ...</li>
    <li>lower-latin: 小写拉丁文，例如: a, b, c, ... z</li>
    <li>upper-latin: 大写拉丁文，例如: A, B, C, ... Z</li>
    <li>armenian: 亚美尼亚数字</li>
    <li>georgian: 乔治亚数字，例如: an, ban, gan, ..., he, tan, in, in-an, ...</li>
    <li>lower-alpha: 小写拉丁文，例如: a, b, c, ... z</li>
    <li>per-alpha: 大写拉丁文，例如: A, B, C, ... Z</li>
    <li>none: 无(取消所有的list样式)</li>
    <li>inherit:继承</li>
    <li>list-style-position——inside-列表项目标记放置在文本以内，且环绕文本根据标记对齐。</li>
    <li>outside-默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。</li>
</ul>
</p>
<p>
    休息一下，看看<a href="https://www.bilibili.com/"  target="_blank">哔站</a>？
</p>
<h4>
    2.4 超链接
</h4>
<p>
    链接总体可以以分为；四种情况

<ul class="c">
    <li>a:link/*未访问链接时*/</li>
    <li>a:visited/*已访问链接*/</li>
    <li>a:hover/*鼠标移动到上方时*/</li>
    <li>a:active/*鼠标点击时*/</li>
</ul>
    <h5>可以实现变色</h5>
<pre><code>
    a:link {color:sandybrown}/*未访问链接时*/
    a:visited {color: red}/*已访问链接*/
    a:hover {color: cyan}/*鼠标移动到上方时*/
    a:active {color: chartreuse}/*鼠标点击时*/
</pre></code>
    <h5>可以实现文本修饰</h5>
<pre><code>
    a:link {text-decoration: none}/*未访问链接时*/
    a:visited {text-decoration: none}/*已访问链接*/
    a:hover {text-decoration: underline}/*鼠标移动到上方时*/
    a:active {text-decoration: underline}/*鼠标点击时*/
</pre></code>
<a id="h16">总结</a>
<p>
    在使用时，四个状态要全部打出，单独打出其中一个是不起作用的。在某些时候可以使用<a id="h53">a{text-decoration: none;}</a>来去掉这些修饰
</p>
<h4>
    2.5 背景
</h4>
<p>
    背景的使用在现在可以说是非常广泛，毕竟谁会放着一个光秃秃的白板在哪，作为初学者，在使用过程中也是有很多很多的问题，
    例如，图片的平铺，位置，随着页面滑动，如何固定位置等等。
</p>
<p>
    背景可以单独的用某种颜色，也可以用使用命令使其拥有渐变效果(要注意的是，CSS3 的渐变在使用时至少要定义两种颜色，并且其分为线性渐变与径向渐变。) 。、
    在使用图片作为背景的时候，初学者们要一定会遇到：
    例如，有些图片不宽，在显示后，右侧会有一片得空白，那木这个时候我们可以用到
    <a id="h53">background-size: cover;/*使图片铺满*/</a>。
    有些时候，某个图片在应用时，他并不适合水平或者垂直方向的平铺。那木这个时候我们可以用到
    <a id="h53">background-repeat:repeat-(x/y);/*只水平/竖直 方向平铺*/</a>。
</p>
<a id="h16">总结</a>
<ul class="c">
    <li>background-color——规定要使用的背景颜色。</li>
    <li>background-position——规定背景图像的位置。</li>
    <li>background-size——规定背景图片的尺寸。</li>
    <li>background-repeat——规定如何重复背景图像。 	</li>
    <li>background-origin——规定背景图片的定位区域。 </li>
    <li>background-clip——规定背景的绘制区域。 </li>
    <li>repeat——默认。背景图像将在垂直方向和水平方向重复。</li>
    <li>repeat-x——背景图像将在水平方向重复</li>
    <li>repeat-y——背景图像将在垂直方向重复</li>
    <li>no-repeat——背景图像将仅显示一次。</li>
    <li>inherit——规定应该从父元素继承 background-repeat 属性的设置。</li>
    <li>background-attachment——规定背景图像是否固定或者随着页面的其余部分滚动。</li>
    <li>background-image——规定要使用的背景图像。</li>
    <li>inherit——规定应该从父元素继承 background 属性的设置。</li>
</ul>
<h4>
    2.6边框
</h4>
<ul class="a">
    <li> 可以通过<a id="h53">border-style属性</a>来定义边框样式</li>
    <li>可以通过<a id="h53"> border-width 属性</a>来定义边框宽度</li>
    <li>可以通过<a id="h53">border-color属性</a>来定义边框颜色</li>
    <li>可以通过<a id="h53">border-style:/dotted/solid/double/dashed;</a>来分别定义各个边框</li>
</ul>
<a id="h16">总结</a>
<ul class="a">
    <li>边框颜色 border-color:颜色</li>
    <li>边框宽度 border-width:宽度</li>
    <li>border-left 设置左边框，一般单独设置左边框样式使用</li>
    <li>border-right 设置右边框，一般单独设置右边框样式使用</li>
    <li>border-top 设置上边框，一般单独设置上边框样式使用</li>
    <li>border-bottom 设置下边框，一般单独设置下边框样式使用,有时可将下边框样式作为css下划线效果应用。</li>
</ul>
<a id="h51">取值</a>
<ul class="c">
    <li>none:无边框。与任何指定的border-width值无关</li>
    <li>hidden:隐藏边框。IE不支持</li>
    <li>dotted:在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线（常用）</li>
    <li>dashed:在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线（常用）</li>
    <li>solid:实线边框（常用）</li>
    <li>double:双线边框。两条单线与其间隔的和等于指定的border-width值</li>
</ul>
<ul class="a">
    <li>groove:根据border-color的值画3D凹槽</li>
    <li>ridge:根据border-color的值画菱形边框</li>
    <li>inset:根据border-color的值画3D凹边</li>
    <li>outset:根据border-color的值画3D凸边</li>
</ul>
<ul class="b">
    <li>简写:border:5px solid red;</li>
</ul>
<h4>
    2.7 块级元素 AD 行内元素
</h4>
<P>
    <a id="h53">块级元素</a>——他会独占一行，在默认情况下，其宽度自动填满其父元素的宽度；块级元素可以设置width、height属性;
    块级元素即使设置了宽度也是独占一行，块级元素可以设置margin、padding属性；
</P>
<p>
    <a id="h53">行内元素</a>——行内元素不会独占一行，相邻的行内元素会排列在同一行里，直到行排不下，就自动换行，其宽度随内容而变化;
    行内元素的width、height属性则无效；
    行内元素的margin、padding属性很奇怪，
    水平方向的padding-left、padding-rigtht、margin-left、padding-right都会产生边距效果，
    但是竖直方向的padding-top、padding-bottom、margin-top、margin-bottom却不产生边距效果
</p>
<a id="h16">总结</a>
    <h5>
        行内元素转换
    </h5>
<ul class="a">
    <li>display:none; 不显示</li>
    <li>display:block;变成块级元素</li>
    <li>display:inline; 变成行内元素</li>
    <li>display:inline-block;以块级元素样式展示，以行级元素样式排列</li>
</ul>
    <h5>
        块级元素
    </h5>
<ul class="a">
    <li>address；地址</li>
    <li>center；举中对齐块</li>
    <li>div；常用块级容易</li>
    <li>dl；定义列表</li>
    <li>h；标签</li>
    <li>hr；水平分隔线</li>
    <li>ol；无序列表</li>
    <li>ul；有序列表</li>
    <li>p；段落</li>
    <li>pre；格式化文本</li>
</ul>
    <h5>
        行内元素
    </h5>
<ul class="a">
    <li>a - 锚点</li>
    <li>b - 粗体(不推荐)</li>
    <li>code - 计算机代码(在引用源码的时候需要)</li>
    <li>em - 强调</li>
    <li>i - 斜体</li>
    <li>img - 图片</li>
    <li>input - 输入框</li>
    <li>label - 表格标签</li>
</ul>
</body>
</html>