HTML+CSS(第三天)

时间 2019-12-14

标签 html+css html css 第三天栏目 CSS 繁體版

原文原文链接

CSS字体样式属性
1. font-size(字号
  1. 属性值能够使用相对单位值也能够使用绝对单位值
  2. 必须增长单位
2. font-family(字体)
  1. 网页中常常使用的字体有宋体、微软雅黑、黑体
  2. 浏览器设置里面能够设置默认的字体
  3. 语法规则：p{font-family:"微软雅黑"},p{font-family:"Microsoft Yahei",Arial;}
  4. 能够同时指定多个字体，中间以逗号隔开，表示若是浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。
  5. 使用技巧：
    1. 如今网页使用的字体大可能是14px往上，且为偶数像素,ie6不支持奇数像素
    2. 中文字体还有空格，#，$组成的字体名称的字体须要加""或者'',
3. CSS unicode字体
  1. 在 CSS 中设置字体名称，直接写中文是能够的。可是在文件编码（GB23十二、UTF-8 等）不匹配时会产生乱码的错误。xp 系统不支持相似微软雅黑的中文。　　
    1. 解决方案一：使用英文代替
    2. 解决方案二：在 CSS 直接使用 Unicode 编码来写字体名称能够避免这些错误。使用 Unicode 写中文字体名称，浏览器是能够正确的解析的。
    3. 例子
      宋体 SimSun \5B8B\4F53css
      
      微软雅黑 Microsoft YaHei \5FAE\8F6F\96C5\9ED1html
      
      黑体 SimHei \9ED1\4F53浏览器
4. font-weight字体粗细
  1. 标签b 和strong能够定义字体的粗细,另外css也能够设置字体粗细可是CSS没有语义
  2. font-weight:normal,blod,bloder,lighter,100-900
  3. 其中blod==700,normal==400
  4. 推荐使用数字这样解析能够更快
5. font-style 字体风格
  1. 标签em和i能够定义字体的倾斜，另外css也能够设置字体的倾斜可是CSS没有语义
  2. font-style:normal,italic(显示斜体的字体样式),oblique(显示倾斜的字体样式)
  3. 使用技巧
    1. 平时咱们不多给文字加斜体，反而喜欢给斜体标签（em，i）改成普通模式。
6. font综合样式设置
  1. 选择器{font:font-style font-weight font-size/line-height font-family;}
  2. 记住顺序
  3. 使用连写方式，必须按照规定的顺序书写，不能更换。
  4. 各个属性之间必须使用空格分开
  5. 其中不须要设置的属性能够省略（取的默认值），可是必须保留font-size和font-family,不然font属性不起做用
  6. 常常使用 font:{12px "微软雅黑"}
CSS外观属性
1. Color文本颜色
  1. color:red,green,blue
  2. Color:#FF0000 Color:#F00
  3. Color:rgb(255,0,0) Color:rgb(100%,0%,0%)
  4. 红绿蓝
2. line-height行高
  1. line-height行高
  2. line-height通常取的属性值单位有px,em,%实际中使用最多的是px
  3. 通常行高设置的比字体大小大7-8个像素点就能够了
3. text-align设置文本内容水平对齐方式
  1. text-align:left|right|center
  2. 是让盒子里面的内容水平居中，而不是让盒子居中对齐字体
4. text-indent属性用于设置首行文本的缩进
  1. 其属性值可为不一样单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，容许使用负值, 建议使用em做为设置单位。
  2. 通常都是使用em做为单位，1个em就是一个字的宽度，段落里面就是一个汉字的宽度
  3. 例子:首行缩进 p{text-indent:2em}
5. text-decoration
  1. text-decoration:none|underline(下划线)|overline(文本上方一条线)|line-through(穿过文本的一条线)
  2. 通常使用的是s标签去下滑线 s{text-decoration:none}
6. 总结
  1. i 和 em 斜体 font-style:normal font-style:italic
  2. b 和 strong 加粗 font-weight:400 font-weight:700
  3. s 和 del 删除 text-decoration:none text-decoration:underline
  4. u 和 ins 插入 text-decoration:none text-decoration:line-through
复杂选择器
1. 复合选择器
  1. 后代选择器
    1. 选择元素或元素组的后代
    2. 例子.class p { color:pink;}
  2. 子代选择器
    1. 子元素选择器只能选择做为某元素子元素的元素。只包含外层标签的亲儿子
    2. 例子 .class>p{color:pink;}
2. 并集选择器
  1. 语法：.class,p{color:red;}
  2. 任何类型的选择器均可以做为并集选择器中的一个子项
3. 交集选择器
  1. 交集选择器由两个选择器组成标签选择器+类选择器
  2. 语法：p.class{color:red;font-size:12px;}
  3. 既。。又。。的条件下知足

伪类选择器

语法规则:选择器名{}

连接伪类选择器

:link{} 未访问的连接的样子
:visted{} 已访问过得连接的样子
:hover{} 鼠标通过连接的样子
:active{} 鼠标按下连接的样子
lv hao 顺序不能颠倒

实际开发中常常用到的例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <style type="text/css" media="screen">
        a{
            font-size: 25px;
            text-decoration: none;
            font-weight: 700;
            color: #000;
        }

        a:hover{
            color: red;
        }
    </style>

</head>
<body>
    <a href="www.baidu.com">百度</a>
</body>
</html>

标签显示模式
1. 块级元素block-level
  1. 块级的元素是独占一行
  2. 宽度 ,高度,内外边距均可以设置
  3. 宽度默认是容器的宽度
  4. 能够容纳其余块元素和内联元素　
  5. 常见的块元素:div p h1-h6 ul ol li
2. 行内元素
  1. 行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构
  2. 和相邻的元素在一行上
  3. 高宽无效，可是水平方向的padding margin能够设置，垂直的不能够
  4. 行内元素只能容纳其余行内元素或者文本（a标签特殊）
  5. 常见的行内元素有：span a strong b em i ins u del s
3. 行内块元素
  1. 和相邻的元素在一行上可是之间有空隙
  2. 能够控制宽度和高度，外边距和内边距
  3. 默认的宽度就是自己内容的宽度
4. 注意事项
  1. 只有文字才能组成段落，因此p标签内不能够放块级元素，同理还有h1-h6,dt
  2. 连接里面不能再放连接
5. 标签显示模式相互转换
  1. 块转行内：display:inline
  2. 块或者行内转行内块:display:inline-block
  3. 行内转块:display:block