小白学习HTML和CSS基础4

最新推荐文章于 2023-07-30 23:49:10 发布

coderWWH

最新推荐文章于 2023-07-30 23:49:10 发布

阅读量107

点赞数

文章标签：小白

本文链接：https://blog.csdn.net/weixin_44215654/article/details/88583996

版权

学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

微动学习Day190316

在W3C学习所作笔记

VScode小技巧：br{$}*50

1.CSS 背景

背景色

p {background-color: gray;}

背景图像

body {background-image: url(/0.gif);}
p.flower {background-image: url(/i/eg_bg_03.gif);}
a.radio {background-image: url(/i/eg_bg_07.gif);}

背景重复.背景定位

body{
	background-image:url();
	background-repeat:no-repeat;
	background-position:center;
}

center会使图像只显示一半啊？？

为 background-position 属性提供值有很多方法。首先，可以使用一些关键字：top、bottom、left、right 和 center。通常，这些关键字会成对出现，不过也不总是这样。还可以使用长度值，如 100px 或 5cm，最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。
百分数值

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50% 50%;
  }

这会导致图像适当放置，其中心与其元素的中心对齐。换句话说，百分数值同时应用于元素和图像。也就是说，图像中描述为 50% 50% 的点（中心点）与元素中描述为 50% 50% 的点（中心点）对齐。
如果图像位于 0% 0%，其左上角将放在元素内边距区的左上角。如果图像位置是 100% 100%，会使图像的右下角放在右边距的右下角。
因此，如果你想把一个图像放在水平方向 2/3、垂直方向 1/3 处，可以这样声明：

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:66% 33%;
  }

如果只提供一个百分数值，所提供的这个值将用作水平值，垂直值将假设为 50%。这一点与关键字类似。
background-position 的默认值是 0% 0%，在功能上相当于 top left。
长度值
长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。
比如，如果设置值为 50px 100px，图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上：

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50px 100px;
  }

2.css文本

缩进文本

使用 text-indent 属性，所有元素的第一行都可以缩进一个给定的长度

p{
	text-indent:5em;
}

如果想把一个行内元素的第一行“缩进”，可以用左内边距或外边距创造这种效果。
使用负值
“悬挂缩进”，即第一行悬挂在元素中余下部分的左边：
首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题，建议针对负缩进再设置一个外边距或一些内边距：

p{
	text-indent:-5em;
	padding-left:5em;
}

使用百分比值
百分数要相对于缩进元素父元素的宽度。

div {width: 500px;}
p {text-indent: 20%;}

水平对齐
值 left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中。
提示：将块级元素或表元素居中，要通过在这些元素上适当地设置左、右外边距来实现。

p{
    text-align:center;
    }

字间隔

p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}

字符转换

  h1 {text-transform: uppercase}
  p.uppercase {text-transform: uppercase}
  p.lowercase {text-transform: lowercase}
  p.capitalize {text-transform: capitalize}

文本装饰
text-decoration 有 5 个值：
none
underline
overline
line-through
blink
处理空白符(默认已有)

p {white-space: normal;}

3.字体

使用通用字体系列

body{font-family:sans-serif;}

这样用户代理就会从 sans-serif 字体系列中选择一个字体（如 Helvetica），并将其应用到 body 元素。因为有继承，这种字体选择还将应用到 body 元素中包含的所有元素，除非有一种更特定的选择器将其覆盖。
字体风格
font-style 属性最常用于规定斜体文本。
该属性有三个值：
normal - 文本正常显示
italic - 文本斜体显示
oblique - 文本倾斜显示
字体加粗
font-weight 属性设置文本的粗细。
使用 bold 关键字可以将文本设置为粗体。
关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，100 对应最细的字体变形，900 对应最粗的字体变形。数字 400 等价于 normal，而 700 等价于 bold。

p.normal {font-weight: normal}
p.thick {font-weight: bold}
p.thicker {font-weight: 900}

字体大小
font-size 属性设置文本的大小。
使用 em 来设置字体大小
如果要避免在 Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替 pixels。

p{font-size:16px;}
p{font-size:1em;}

4.连接

设置连接样式

a:link {color:#FF0000;}		/* 未被访问的链接 */
a:visited {color:#00FF00;}	/* 已被访问的链接 */
a:hover {color:#FF00FF;}	/* 鼠标指针移动到链接上 */
a:active {color:#0000FF;}	/* 正在被点击的链接 */

注释：为了使定义生效，a:hover 必须位于 a:link 和 a:visited 之后！！
注释：为了使定义生效，a:active 必须位于 a:hover 之后！！
文本修饰
text-decoration 属性大多用于去掉链接中的下划线：

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

顺序不能乱
背景色

a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

以上内容可结合使用以达到更多效果

高级设置这个难道不是设计师的事么？？？？？？？？

<html>
<head>
<style>
a:link,a:visited
{
display:block;
font-weight:bold;
font-size:14px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
}
a:hover,a:active
{
background-color:#7A991A;
}
</style>
</head>

<body>
<a href="/index.html" target="_blank">W3School</a>
</body>
</html>

5.列表

无序列表

ul.disc {list-style-type: disc}
ul.circle {list-style-type: circle}
ul.square {list-style-type: square}
ul.none {list-style-type: none}

有序列表

ol.decimal {list-style-type: decimal}/*123*/
ol.lroman {list-style-type: lower-roman}
ol.uroman {list-style-type: upper-roman}
ol.lalpha {list-style-type: lower-alpha}
ol.ualpha {list-style-type: upper-alpha}

图像，这个厉害

list-style-image: url()

6.表格

我觉得这里应该掌握的是合并单元格，诸如边框，对齐方式，边框样式，颜色，宽度高度等，
都是和其他元素一样通用的，
每个元素有自己独特的地方。

7.轮廓

p.dotted {outline-style: dotted}
p.dashed {outline-style: dashed}
p.solid {outline-style: solid}
p.double {outline-style: double}
p.groove {outline-style: groove}
p.ridge {outline-style: ridge}
p.inset {outline-style: inset}
p.outset {outline-style: outset}

coderWWH

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
小白学习HTML和CSS基础4

微动学习在W3C学习所作笔记br{$}*501.CSS 背景背景色p {background-color: gray;}背景图像body {background-image: url(/0.gif);}p.flower {background-image: url(/i/eg_bg_03.gif);}a.radio {background-image: url(/i/eg_...
复制链接

扫一扫

专栏目录