zoukankan      html  css  js  c++  java
  • css day2

    外观属性
    color:文本颜色
    用于定义文本的颜色
    1.预定义的颜色值,如red、green、blue等
    2.十六进制,如#FF0000、#FF6600、#29D794等。十六进制是最常用的定义颜色的方式
    3.RGB代码,如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)
    line-height:行间距
    <style>
    p {
    line-height:20px;
    }
    </style>
    一般情况下,行间距比字号大7/8像素即可
    text-align:水平对齐方式
    用于设置文本内容的水平对齐,相当于html中的align对齐属性
    属性
    left:左对齐(默认值)
    right:右对齐
    center:居中对齐
    <style>
    h1 {
    text-align:center;
    }
    </style>
    text-indent:首行缩进
    设置首行文本的缩进,其属性值可为不同单位的数值、em字符宽度的倍数或相对于浏览器窗口宽度的百分比%
    允许使用负值,建议使用em作为设置单位
    1em就是一个字的宽度,如果是汉字的段落,1em就是 一个汉字的宽度
    letter-spacing:字间距
    用于定义字符与字符之间的间距,其属性值可为不同单位的数值,允许使用负值,默认为normal
    word-spacing:单词间距
    用于定义英文单词之间的间距,对中文字符无效,与letter-spacing相同,其属性值可为不同单位的数值,允许使用负值,默认为normal
    word-spacing与letter-spacing均可对英文进行设置,不同的是letter-spacing定义的字母之间的间距,而word-spacing定义的为单词之间的间距
    word-break:自动换行
    normal:使用浏览器默认的换行规则
    break-all:允许在单词内使用换行
    keep-all:只能在半角空格或连字符处换行
    颜色半透明
    color:rgba(0,0,0,a)
    其中a是alpha(透明的意思),取值范围在0~1之间
    4个参数都不可省略
    例子:color:rgba(0,0,0,0.3)
    文字阴影
    text-shadow:h-shadow,v-shadow,blur,color
    text-shadow:水平位置,垂直位置,横排距离,阴影颜色
    h-shadow:必需,水平阴影位置,允许负值
    v-shadow:必需,垂直阴影位置,允许负值
    blur:可选,模糊的距离
    color:可选,阴影的颜色
    text-shadow:1px,3px,3px,rgba(0,0,0,0.5)
    快捷键
    1.生成标签,直接输入标签名,按Tab键即可
    2.若想生成多个相同标签,加上*即可,如div*3即可快速生成3个div,再按Tab即可
    3.如果有父子级关系的标签,可以用>,如ul>li,ul>li*5,再按Tab即可即可
    4.如果有同级关系的标签,用+即可,如div+p,再按Tab即可
    5.如果生成带有类名或id名的,直接写.demo或者#two,再按Tab即可
    引入css样式表(书写位置)
    内部样式表(内嵌式)
    将css代码集中写在html文档的head头部标签中,并且用style标签定义
    语法中,style标签一般位于head标签的title标签之后,也可以将其放在html文档的任意地方
    <head>
    <style>
    选择器 {属性1:属性值1;属性2:属性值2;属性3:属性值3;···}
    </style>
    </head>
    行内式(内联样式)
    <标签名 style="属性1:属性值1;属性2:属性值2;属性3:属性值3;···">内容</标签名>
    <div style="color:red">哈哈哈</div>
    外部样式表(外链式)
    将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中,通过link标签将外部样式表文件链接到html文档中
    <head>
    <link herf="CSS文件的路径" type="text/CSS" rel="stylesheet">
    </head>
    herf:定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径
    type:定义所链接文档的类型,在此处需要指定为“text/CSS”,表示链接的外部文件为CSS样式表
    rel:定义当前文件与被链接文档之间的关系,在这里需要指定为“stylesheet”,表示被链接的文档是一个样式表文件
    三种样式表总结
    样式表 优点 缺点 使用情况 控制范围
    行内样式表 书写方便,权重高 没有实现样式和结构分离 较少 控制一个标签(少)
    内嵌样式表 部分结构和样式分离 没有彻底分离 较多 控制一个页面(中)
    外部样式表 完全实现结构和样式分离 需要引入 最多,强烈推荐 控制整个站点(多)

  • 相关阅读:
    一个小例子说明函数式编程
    单元测试的规范
    单元测试jest部署
    正向代理与反向代理
    Cookie与Session
    从输入URL到页面加载发生了什么?
    使用Vue-cli3.0创建的项目,如何发布npm包
    Vue中通过Vue.extend动态创建实例
    使用npm link 加速调试
    单元测试之断言
  • 原文地址:https://www.cnblogs.com/oldwangcy/p/11402333.html
Copyright © 2011-2022 走看看