[关闭]
@wangyupu 2020-05-21T06:08:53.000000Z 字数 3450 阅读 25



HTML5+CSS第五章笔记主讲字体样式和背景颜色

HTML5+CSS

字体样式

  1. font-family：设置字体类型 示例：font-family:"隶书";
  2. font-size  ：设置身体大小 示例：font-size:12px;
  3. font-style : 设置字体风格 示例：font-style:italc;
  4. font-weight: 设置字体的粗细 示例：font-weight:bold；
  5. font         在一个声明中设置所有的字体属性
  6. 示例：font:italic bold 36px "宋体"；
  7. font-weight属性
  8. normal        默认值
  9. bold          粗体字体
  10. bolder        更粗的字体
  11. lighter       更细的字体
  12. 100,200，300,400,500,600,700,800,900
  13. 定义由细到粗的字体
  14. 400等同于normal,700等同于bol

字体属性

  1. font属性
  2.     字体属性的顺序：字体风格>字体粗细>字体大小>字体类型
  3. 示例：
  4. p span {font：oblique bold 12px "楷体"；
  5. 文本样式
  6. 文本属性
  7. color               设置文本格式            color：#00c；
  8. text-align          设置元素的对齐方式      text-align:right;
  9. text-indent         设置首行文本的对齐方式  text-indent:20px;
  10. line-height         设置文本的高度          line-height:25px；
  11. （当文本的高度等于当前页面高度文本居中显示）
  12. text-decoration     设置文本的装饰          text-decoration:underline;

文本颜色

  1. color属性
  2.     十六进制方法表示颜色：
  3.     前两位表示：红色分量
  4.     中间两位表示：绿色分量
  5.     后两位表示：蓝色分量
  6.     RGB(r,g,b):正整数的取值为0~255
  7.     简单聊一下RGBA
  8. 在RGB基础上增加一个控制alpha透明度的参数，其中这个透明度值为0~1
  9. 示例：
  10. color:#A983D8;
  11. color：#EEFF66;
  12. color: rgb(0.255,255)
  13. color: rgba(0.0.255,0.5)
  14. <style type="text/css">
  15.         .top{
  16.             /*改变字体类型
  17.             font-family: Verdana,"宋体";
  18.             改变字体大小     默认 16px
  19.             font-size: 26px;
  20.             改变字体风格     倾斜 
  21.             font-style: oblique;
  22.             字体加粗 bold=700
  23.             font-weight: bold;*/
  24.             /*字体风格→字体粗细→字体大小→字体类型
  25.              最少要有两项  并且最后一项必须有
  26.              */
  27.             /*font:oblique 700 26px "宋体";*/
  29.             /*改变字体颜色  #000黑色 #fff 白色   #eee灰色
  31.              * 0-255  
  32.              * (红，绿,蓝)
  33.              * rgba(红，绿,蓝，透明度(0-1))
  34.              * */
  35.             /*color: rgb(255,100,100);*/
  36.             /*color:rgba(0,0,0,0.5) ;
  37.             */
  38.         }
  39.     </style>
  40.     <body>
  41.         <p>
  42.             老师今天没<span class="top">洗头ABC</span>
  43.         </p>

排版文本段落

  1. left:把文本列到左边。默认值：有浏览器决定
  2. right:把文本列到右边
  3. center:把文本列到中间
  4. justify:实现两端对其文本效果

文本修饰和垂直对齐

  1. text-decoration
  2. none            默认值定义的标准文本
  3. underline       设置文本的下划线
  4. overline        设置文本的上划线
  5. line-through    设置文本的删除线
  6. 示例：
  7. a{
  8.     text-decoration:none;}
  9. a:hover{text-decoration:underline;}
  10. 第二个：
  11. style type="text/css">
  12.         div{
  13.             border: 1px solid red;
  14.             width: 600px;
  15.             height: 300px;
  16.             /*text-align  水平移动    center居中   right右  left左（默认）*/
  17.             text-align: center;
  18.             /*缩进*/
  19.             /*text-indent: 20px;*/
  20.             /*文本内容每行高度    行高*/
  21.             line-height: 300px;
  23.         }
  24.         div a{
  25.             /*修饰文本   去掉下划线*/
  26.             text-decoration: none;
  27.             color: red;
  28.         }
  29.     </style>
  30.     <body>
  31.         <div>
  32.             <a href="index.html"><del>AAAAAAAAAAA</del></a>
  33.         </div>

文本阴影

  1. text-shadow:阴影颜色 x轴 y轴 阴影模糊半径;
  2. 示例如下：
  3. text-shadow:color x-offset y-offset blur -radius;

伪类样式

  1. 语法：伪类名{声明；}
  2. 示例
  3. a：hover{
  4.     color:#B46210;
  5.     text-decoration:underline;
  6. }
  7. 使用css设置超链接
  8. a:link      未单击访问时超链接样式       a:link{color#qef;} (谷歌浏览器link不写)
  9. a:visited   单机访问时超链接样式         a:cisited{color:#333；}
  10. a:hover     鼠标悬浮其上的超链接样式     a:hover{color:#FF7300;}(任何标签都能用)
  11. a:active    鼠标单击释放时的超链接样式   a:active{color:#999;}
  13. a:link>a:visted>a：hover>a:active

list-style-type list-style-image

  1. none        无标记符号          list-style-type:none;
  2. disc        空心圆默认类型      list-style-type:disc;
  3. circle      空心圆              list-style-tyoe:circle;
  4. square      实心正方形          list-style-type:square;
  5. decimal     数字                list-style-type:decimal;
  6. list-style
  7. li{
  8.     list-style:none;
  9.     }
  10. 去除列表前面的小黑点

常见的背景样式

  1. 背景颜色
  2. background-color
  3. 背景颜色值：十六进制方法表示
  4. transparent
  5. 背景图像
  6. background-image
  7. 背景图像
  8. background-image属性
  9. background-image：url(图片路径)；
  10. 背景重复方式
  11. background-repeat属性
  12. repeat:沿水平和垂直两个方向盘平铺
  13. no-repeat:不平铺，即只显示一次
  14. repeat-x:只沿水平方向平铺
  15. repeat-yk:只沿垂直方向平铺

背景定位

  1. background-position属性
  2. xpos  ypos（单位：px）  xpos表示水平位置ypos表示垂直位置
  3. x%   y&                 使用百分比表示背景的位置
  4. x方向关键词             水平方向的关键词（left,centor,right）
  5. y方向关键词             垂直方向的关键词（top,center,bottom）

背景属性

  1. background属性
  2. .title{
  3.         font-size:18px;
  4.         font-weight:bold；
  5.         color:#fff;
  6.         text-indent:lem;
  7.         line-height:35Px;
  8.         background:#coo url(图片路径) 295px(背景定位x坐标) 10px(背景定位y坐标)                         no-repeat(背景buchongfu);
  9. 背景图片的大小进行控制
  10. 背景尺寸       background-size
  11. auto                 默认值，使用背景图片保持原样
  12. percentage           当使用百分值时，不是相对于背景的尺寸大小来计算的。而是相对于宽度来计算的
  13. cover                整个背景图片放大填充了整个元素
  14. contain              让背景图片保持本身的宽高比例，将背景图片放到本身的宽高比例或者高度正好使用                      所定义的背景区域
  15. 示例：
  16.     {background:url(xxx图片位置)；
  17.     background-size:contain；}
  18.     img{
  19.             /*垂直移动图片  middle居中 top上  bottom下*/
  20.             vertical-align:  middle;
  21.         }

线性渐变

  1. 颜色沿着一条直线过渡：从左到右，从右到左，从上到下，对角线演变
  2. 径向演变
  3. 圆形或椭圆形渐变颜色不在沿着一条直线变化而是从一个点朝所有方向混合
  4. 浏览器核心
  5. IE浏览器是trident内核，加前缀：-ms-
  6. chrome浏览器是webkit内核，加前缀：-webkit-
  7. safari浏览器是webkit内核.加前缀：-webkit-
  8. opera浏览器是blink内核，加前缀-0-
  9. firefox浏览器是mozilla内核加前缀：-moz-
  10. 语法：
  11. background:-webkit-liner-gradient(position,color1,color2·······)
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注