2.3 CSS样式_HTML视频教程

- 灬无言 - 阅 6,241

小小课堂网HTML视频教程零基础入门首选。

下方为HTML视频教程,如视频不能正常播放,请安装flash或更换浏览器。请记得在视频右下角选择“超清”,然后点击“全屏”,效果更加。

2.3.1 宽高

width属性设置元素的宽度,height属性设置元素的高度。不会被后代继承。

这两个属性定义元素内容区的宽度和高度。(不包括内容区外的内边距、边框及外边距)

描述
auto 默认,浏览器自动计算
length 使用px、cm等长度单位
% 基于包含它的块级对象的百分比

例:

#div1 {

width:100px;

height:100px;

}

2.3.2 边框

HTML中出现很多次,类似于border=“100px”。现在初识CSS中如何设置边框,后面盒模型中,再详细讲。

例:

table {

border:1px solid red;

}

2.3.3 背景

CSS的背景属性,主要有背景颜色和背景图像(背景图像平铺、背景图像大小、背景图像位置等)。

CSS背景属性如下:

  • 背景颜色:background-color

语法: background-color:颜色;

例:

p {

background-color:red;

}

  • 背景图像:background-image

语法: background-image:url(图像位置);   。

例:

p {

background-image:url(1.jpg);

}

  • 背景图像是否平铺:background-repeat

语法:background-repeat:值;

值:no-repeat、repeat-x、repeat-y 不平铺、沿X轴平铺、沿Y轴平铺。

例:

p {

background-image : url(1.jpg);

background-repeat : no-repeat;

}

  • 背景图像位置:background-position

语法:background-position: X轴位置 Y轴位置;

表示方法,这里讲三种,英文字母、百分比和长度值px表示。

字母:X轴:left、center、right左中右   Y轴:top、center、bottom上中下

百分比:%

例:

p {

background-position:left top;  <!—或者30% 50% –>

}

长度值:指元素元素内边距区左上角的偏移。偏移点是图像的左上角。

例:

p {

background-position:100px 200px;

<!—图像左上角向右移动100像素,向下移动200像素–>

}

如仅写一个值,则另外一个值为50%或center的含义。

  • 背景图像是否固定:background-attachment

默认值为scroll,图像随着文档滚动。禁止滚动值为fixed。

例:

p {

background-image:url(1.jpg);

background-attachment:fixed;

}

  • 背景复合属性:background

复合属性就是把上面属性都写在一起。

例:

p{

background : red url(1.jpg) left center fixed;

}

2.3.4 文本

通过文本属性,可以改变文本颜色、字符间距、对齐文本、装饰文本、缩进等。

常用文本属性如下:

  • 文本缩进:text-indent

缩进单位:px或百分比

例:

p {

text-indent:50px;

}

  • 文本对齐:text-align

值:left、right、center、justify 左、右、居中、两端对齐。

例:

p {

text-align:left;

}

  • 行高:line-height

值:normal、数字、长度、百分比。line-height值等于height值垂直对齐效果。

例:

p {

line-height:50px;

}

  • 单词间距:word-spacing

值:normal、长度。单词间距

例:

p {

word-spacing:10px;

}

  • 字符间距:letter-spacing

值:normal、长度。汉字间距

例:

p {

letter -spacing:10px;

}

  • 下划线:text-decoration

值如下:

描述
none 默认。
underline 文本下的一条线
overline 文本上的一条线
line-through 穿过文本的一条线

例:

p {

text-decoration:underline;

}

  • 文本颜色:color

更改文字颜色。

例:

p {

color:red;

}

  • 控制文本大小写:text-transform

属性值如下:

描述
none 默认。
capitalize 首字母大写
uppercase 全部字母大写
lowercase 全部字母小写

例:

p {

text-transform:capitalize;

}

2.3.5 字体

 CSS字体属性定义文本的字体系列、大小、加粗、风格(如斜体)、变形。

属性值如下:

  • 字体尺寸:font-size

常用值:像素px,其他属性如下表:

描述
medium 默认。(还可以在small和large前面加x-或xx-表示大小)
smaller 比父级元素小的尺寸
larger 比父级元素大的尺寸
长度 固定值 如px
百分比 基于父级元素的一个百分比值

例:

p {

font-size:20px;

}

  • 字体系列:font-family

属性值:Times, TimesNR, ‘New Century Schoolbook’,Georgia, ‘New York’, serif

多个字体之间用逗号“,”隔开。

例:

p {

font-family:Times, TimesNR, ‘New Century Schoolbook’,

Georgia, ‘New York’, serif;

}

  • 字体风格:font-style

属性值:normal、italic、oblique,依次为正常、斜体、倾斜。

例:

p {

font-style:italic;

}

  • 字体粗体:font-weight

属性值如下表:

描述
normal 默认。
bold 粗体
bolder 更粗
lighter 更细
100
200

900
400等于normal

例:

p {

font-weight:bold;

}

  • 设置小型大写字母:font-variant

属性值:normal、small-caps即正常和 显示小型大写字母的字体

例:

p {

font-variant:small-caps;

}

  • 简写属性:font

简写就是把上面的属性写在一起。

例:   font:22px  italic bold;

2.3.6 链接

链接的特殊性在于能够根据它们所处的状态来设置它们的样式。

链接的四种状态:

  • a:link – 普通的、未被访问的链接
  • a:visited – 已访问的链接
  • a:hover – 鼠标指针位于链接的上方时
  • a:active – 链接被点击的时刻

要求:设置链接不同状态时,按以下次序规则:

  • a:hover必须位于a:link和a:visited之后
  • a:active必须位于a:hover之后

例:

a:link {color:red;}

a:visited{color:blue;}

a:hover{color:green;}

a:active{color:pink;}

2.3.7 列表

CSS列表属性如下:

  • 列表类型:list-style-type

属性值: disc、none、circle、square依次代表默认(实心圆)、无标记、空心圆、实心方块。  其他属性值还有很多,但不常用。

最好是用类选择器,使用ul.circle或ol.circle在文档中多次使用该类型。

例:

<head>

<title>CSS列表</title>

<style type=”text/css”>

ul.square{

list-style-type:square;

}

</style>

</head>

<body>

<ul class=”square”>

<li>苹果</li>

<li>苹果</li>

</ul>

</body>

  • 列表项图像:list-style-image

语法:list-style-image:url(图像位置)   用的比较多。毕竟可以DIY样式。

例:

list-style-image:url(1.jpg);

  • 列表标志位置:list-style-position

属性值:outside(默认值)、inside:列表项目标记在文本内且环绕文本。

例:

list-style-position:inside;

  • 列表简写:list-style

简写就是把上面属性都写在一起。

例:

p{

list-style:square url(images/2.png) outside;

}

2.3.8

表格几个常用属性:

  • 普通边框:border

例:

table,th,td {

border:1px solid red;

}

注:以上表格具有双线条边框,由于table、th、td元素都有独立边框。

下面属性可以显示为单线条边框。

单一边框:border-collapse

例:

table {

border-collapse:collapse;

}

table,th,td {

border:1px solid red;

}

  • 高度和宽度

通过width和height定义,单位百分比或px。可以是table tr td th

一般来说,table控制宽度,tr控制高度

table{

width:100px;

height:100%;

}

tr {

height:100px;

}  表格宽100像素,高100%,行高100像素

  • 文本对齐

text-align和vertical-align分别为水平对齐,垂直对齐。

text-align属性left、right、center。

vertical-align属性top、center、bottom。

例:

td,th {

text-align:left;

vertical-align:top;

}  单元格水平左对齐,垂直上对齐

  • 表格内边框

表格中的内容和边框之间的距离,td和th这两个表示单元格的标签,设置padding(盒模型会讲的内边距)。

例:

td,th{

padding:10px;

}

  • 表格颜色

table、td、th都可以设置边框、文本和背景颜色。

例:

table,td,th{

border:1px solid red;

}

th,td {

color:pink;

}

th,td{

background-color:green;

}

2.3.9 轮廓

         轮廓是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。

注:轮廓线不会占用空间,形状也不固定。

属性:outline-color、outline-style、outline-width边框颜色 边框样式 边框宽度

边框样式:dashed虚线dotted 点状 还有些其他的就不多做说明了。

简写:outline:颜色 样式 宽度。

例:outline:red solid 10px;

以上就是小小课堂SEO自学网带来的《2.3 CSS样式_HTML视频教程》。感谢您的观看。SEO培训认准小小课堂!

非特殊说明,本文为小小课堂SEO自学网原创,欢迎转载并保留版权 https://www.xxkt.org/

本站提供SEO培训、咨询、诊断,微信(电话):13722793092 微信公众号:xxktorg

            

一条回应:“2.3 CSS样式_HTML视频教程”

  1. 马慧SEO说道:

    小小课堂SEO自学网(https://www.xxkt.org/ ),全网营销SEO概念提出者,提供SEO培训、全站优化诊断、顾问咨询为主的SEO服务。分享SEO实战经验,新站快速排名,单页面排名和三方平台推广等技术。电子书营销、论坛发帖推广、电子邮件营销、新媒体运营等网络营销教程。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章!