css基础知识
(一)css样式表的定义
(二)css样式表的语法 Pre标签
(三)内部样式表
(四)外部样式表
(五)内联样式表
css样式表的定义
css:(Cascading Style Sheets)层叠样式表;
分类及位置:内部样式-head区域style标签里面
外部样式-link调用
内联样式-标签元素里面
css内的注释:/*注释内容*/ //
CSS实际上就是一个样式文件,如颜色,加粗,间距,等,把这些样式放在一个文件中。
css样式表的语法
CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。
下面的示意图为您展示了上面这段代码的结构:例:ex01.html
h1{color:red;font-size:14px;}
三种颜色表示方法: 1.英文单词//
2.#开头16进制6位数(两两相同可以缩写)
内部样式表
当单个页面需要设置样式时,就应该使用内部样式表。
使用 <style></style>标签在文档<head></head>里面定义内部样式表
<head>
<style type="text/css" >
p{color:red;}
</style>
</head>
内联样式[淘汰]
写在标签里面的样式
如:<p style=“color:red;”></p>
表示给p标签里面的文字颜色设置为红色
外部样式
当样式需要应用于很多页面时,就需要用到外部样式表,首先需要创建一个css文件,然后引用到我们的页面中。
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
课后作业:
1、制作一个网页,用三种不同的方法去控制html页面内的标签样式。
css样式讲解【上】
css控制字体
一、color 控制字体颜色
1、十六进制值 #CC0066 #000
2、英文单词里颜色值 red gray blue yellow
二、font-size 控制文字字体大小
font-size:12px;
三、font-family 控制字体的类型
font-family:"黑体"; font-family:"黑体"; /*常用字体类型为黑体,宋体,微软雅黑*/
四、font-weight 控制字体的粗细
font-weight:bold;
font-weight:100; normal正常
五、text-align 控制文字水平方向位置
1、left 水平距左 默认值
2、center 水平距中
3、right 水平距右
六、line-height 文字在竖直方向距中显示
line-height:25px;
line-height:1.5; /*文字的行距倍数用的更多*/
七、text-decoration 向文本添加修饰
1、none 默认。定义标准的文本。
2、underline 定义文本下的一条线。
3、overline 定义文本上的一条线。
4、line-through 定义穿过文本下的一条线。
八、text-indent 缩进文本
1、em做单位 text-indent:2em; 1em代表一个汉字的距离
2、px做单位 text-indent:20px
3、百分比 text-indent:200%;百分数要相对于缩进元素父元素的宽度。
4、使用负值 text-indent:-2em;
九、letter-spacing字距
letter-spacing:8px;字与字之间的距离;
十、overflow 文字超出内容区是表现形式
css样式讲解【下】
一、background-color 背景颜色
1、十六进制值 #CC0066 #000
2、英文单词里颜色值 red gray blue yellow
二、background-image 添加背景图片
1、url("地址") 引用背景图片的地址
2、none 不使用背景图片
三、background-repeat 背景重复
1、no-repeat 不重复 只出现一张
2、repeat-x 水平方向重复
3、repeat-y 竖直方向重复
4、repeat 同时水平和竖直两个方向平铺 默认值
四、background-position 背景图片的位置
1、使用关键字:top、bottom、left、right 和 center 两两组合而成
2、一个对应水平方向,另一个对应垂直方向
备注:如果只出现一个关键字,则认为另一个关键字是 center
四、background-position 背景图片的位置
1、百分数值 (水平% 竖直%)
background-position:20% 30%;
备注:如果只提供一个百分数值,所提供的这个值将用作水平值,垂直值将假设为 50%
2、具体的值 (水平px 竖直px)
background-position:20px 30px;
五:background-attachment背景关联
1、 fixed 固定定位图片
2、 Scroll:背景图像随内容滚动。
六:background 综合样式控制
background:red no-repeat 2px 5px; background: url("") 背景颜色 重复 位置;
表格案例
1、border-collapse:collapse 为表格设置合并边框模型
2、colspan="2" 表格单元横跨两列的表格
3、rowspan="2" 表格单元横跨两行的表格
标签:网页,样式,text,CSS,background,font,制作,css,样式表 From: https://www.cnblogs.com/guyanleng/p/16789744.html