外观属性
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”，表示被链接的文档是一个样式表文件
三种样式表总结
样式表 优点 缺点 使用情况 控制范围
行内样式表 书写方便，权重高 没有实现样式和结构分离 较少 控制一个标签（少）
内嵌样式表 部分结构和样式分离 没有彻底分离 较多 控制一个页面（中）
外部样式表 完全实现结构和样式分离 需要引入 最多，强烈推荐 控制整个站点（多）

css day2的更多相关文章

  1. Day6:html和css

    Day6:html和css 复习 margin: 0; padding: 0; <!DOCTYPE html> <html lang="en"> <h ...

  2. Day5:html和css

    Day5:html和css 如何实现盒子居中问题,要让盒子实现水平居中,要满足是快级元素,而且盒子的宽度要定义.然后数值为auto即可. .dashu { width: 100px; margin: ...

  3. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  4. Day2:html和css

    Day2:html和css 表格是一种常用的标签,表格结构,做到能够合并单元格. 表格的属性: 属性名 说明 border 设置表格的边框 cellspacing 设置单元格与单元格边框之间的空白间距 ...

  5. 前端入门-day2（常见css问题及解答）

    写在前面 今天是入门前端的day2, 小伙伴们应该已经看了一些HTML的基础和CSS的基础了,是不是遇到了很多关于CSS的问题呢.因为HTML很少有太复杂的问题,所以直接写一篇关于CSS的常见问题及解 ...

  6. Day2 CSS

    什么是CSS 层叠样式表(cascading style sheet) 控制页面元素的显示方式.(添加样式) CSS语法 行间样式 行内式是在标记的style属性中设定CSS样式.这种方式没有体现出C ...

  7. CSS基础-DAY2

    CSS属性操作-文本 文本颜色 <head> <style> p{ /*color:#8B5742 ;色码表*/ color: RGBA(255,0,0,0.5); /*调色, ...

  8. 中软培训第一周复习总结 --简单的HTML 与CSS

    一些需要记住的点: day1 HTML格式及简单标签: html 文件一般格式: 1 <html> 2 <head lang="en"> 3 <met ...

  9. Python实例---模拟微信网页登录(day2)

    第三步: 实现长轮询访问服务器---day2代码 settings.py """ Django settings for weixin project. Generate ...

随机推荐

  1. NIO编程模式示例

    1. 服务端 import java.net.InetSocketAddress; import java.nio.ByteBuffer; import java.nio.channels.*; im ...

  2. postman与soapui操作

    get和post请求的区别? get请求:直接在浏览器里直接调用就可以了,不用借助工具   向服务端获取数据的    数据是放在url里面 post请求:向服务端发送数据的     数据放在body里 ...

  3. Mac终端的Cocoapods创建自己的私有库和公有库

    一,前言 为什么要用Cocopods 通常在开发的过程中,大多时候,我们会处理一类相同的操作,比如对于字符串String的邮箱验证,是否为空,手机号验证,或者一些UIView的动画操作,我们为了避免写 ...

  4. 本页面用来演示如何通过JS SDK，创建完整的QQ登录流程，并调用openapi接口

    QQ登录将用户信息存储在cookie中,命名为__qc__k ,请不要占用 __qc__k : 1) :: 在页面顶部引入JS SDK库: 将“js?”后面的appid参数(示例代码中的:100229 ...

  5. Linux系统中imp导入dmp文件

    [oracle@ocm1 ~]$ lltotal 32-rw-r--r-- 1 oracle oinstall 24576 Mar 27 15:26 COUNTRIES.dmpdrwxr-xr-x 2 ...

  6. BeautifulSoup笔记

    ## find_all的使用: 1. 在提取标签的时候,第一个参数是标签的名字.然后如果在提取标签的时候想要使用标签属性进行过滤,那么可以在这个方法中通过关键字参数的形式,将属性的名字以及对应的值传进 ...

  7. SLF4J: The requested version 1.6 by your slf4j binding is not compatible with [1.5.5, 1.5.6]

    SLF4J:你的SLF4J绑定请求的1.6版不兼容[1.5.5,1.5.6] 在lib中,此时slf4j的版本是1.5.6,而slf4j-log4j的版本是1.6.由于版本的不兼容性,导致了这个错误. ...

  8. js初步简单的编程代码

    简单图片切换编码demo图片地址自行替换 简单图片切换编码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  9. day20—CSS中伪类:before与:after的应用:

    转行学开发,代码100天——2018-04-05 CSS中的两个伪类:before和:after适合应用与在元素的开始或者结尾处添加修饰性文字或外观,实现内容添加的同时并没有破坏HTML代码 语义.如 ...

  10. day12—jQuery ui引入及初体验

    转行学开发,代码100天——2018-03-28 按照所下载教学视频,今天已进行到jQuery UI的学习中.注:本人所用教学视频不是太完整,介绍的内容相对简单,有些只是带过.其他时间中,仍需继续针对 ...