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”,表示被链接的文档是一个样式表文件
三种样式表总结
样式表 优点 缺点 使用情况 控制范围
行内样式表 书写方便,权重高 没有实现样式和结构分离 较少 控制一个标签(少)
内嵌样式表 部分结构和样式分离 没有彻底分离 较多 控制一个页面(中)
外部样式表 完全实现结构和样式分离 需要引入 最多,强烈推荐 控制整个站点(多)
css day2的更多相关文章
- Day6:html和css
Day6:html和css 复习 margin: 0; padding: 0; <!DOCTYPE html> <html lang="en"> <h ...
- Day5:html和css
Day5:html和css 如何实现盒子居中问题,要让盒子实现水平居中,要满足是快级元素,而且盒子的宽度要定义.然后数值为auto即可. .dashu { width: 100px; margin: ...
- Matplotlib数据可视化(3):文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- Day2:html和css
Day2:html和css 表格是一种常用的标签,表格结构,做到能够合并单元格. 表格的属性: 属性名 说明 border 设置表格的边框 cellspacing 设置单元格与单元格边框之间的空白间距 ...
- 前端入门-day2(常见css问题及解答)
写在前面 今天是入门前端的day2, 小伙伴们应该已经看了一些HTML的基础和CSS的基础了,是不是遇到了很多关于CSS的问题呢.因为HTML很少有太复杂的问题,所以直接写一篇关于CSS的常见问题及解 ...
- Day2 CSS
什么是CSS 层叠样式表(cascading style sheet) 控制页面元素的显示方式.(添加样式) CSS语法 行间样式 行内式是在标记的style属性中设定CSS样式.这种方式没有体现出C ...
- CSS基础-DAY2
CSS属性操作-文本 文本颜色 <head> <style> p{ /*color:#8B5742 ;色码表*/ color: RGBA(255,0,0,0.5); /*调色, ...
- 中软培训第一周复习总结 --简单的HTML 与CSS
一些需要记住的点: day1 HTML格式及简单标签: html 文件一般格式: 1 <html> 2 <head lang="en"> 3 <met ...
- Python实例---模拟微信网页登录(day2)
第三步: 实现长轮询访问服务器---day2代码 settings.py """ Django settings for weixin project. Generate ...
随机推荐
- 【java】Split函数踩坑记
先看一段代码: String line = "openssh|7.1"; String[] pkg = line.split("|"); System.out. ...
- Linux内核设计与实现 总结笔记(第八章)下半部和推后执行的工作
上半部分的中断处理有一些局限,包括: 中断处理程序以异步方式执行,并且它有可能打断其他重要代码的执行. 中断会屏蔽其他程序,所以中断处理程序执行的越快越好. 由于中断处理程序往往需要对硬件进行操作,所 ...
- Cluster基础(一):配置iSCSI服务、编写udev规则、配置并访问NFS共享、部署Multipath多路径环境
一.配置iSCSI服务 目标: 本案例要求先搭建好一台iSCSI服务器,并将整个磁盘共享给客户端: 虚拟机添加新的磁盘 将新添加的磁盘分区并创建两个逻辑卷 逻辑卷名称分别为:/dev/myvg/isc ...
- Java后端进阶教程
https://www.cnblogs.com/caoleiCoding/p/6170555.html 传智播客Java Spring框架:https://www.bilibili.com/video ...
- Swap——hdu 2819
Swap Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submis ...
- lightoj1094 - Farthest Nodes in a Tree
1094 - Farthest Nodes in a Tree PDF (English) Statistics Forum Time Limit: 2 second(s) Memory Limi ...
- C++ 运算符优先级顺序表 (最新/完整)
优先级 运算符 结合律 助记 1 :: 从左至右 作用域 2 a++.a--.type().type{}.a().a[]...-> 从左至右 后缀自增减.函数风格转型.函数调用.下标.成员访问 ...
- AppiumLibrary库倒入后显示红色,日志报错:ImportError: cannot import name 'InvalidArgumentException'
AppiumLibrary安装后,robotframe worke 倒入后一直显示红色,查看日志报错:ImportError: cannot import name 'InvalidArgumentE ...
- MongoDb python连接
方式一:简写 client = MongClient() 方式二:指定端口和地址 client = MongoClient('localhost':27017) 方式三:使用URI --统一资源定位 ...
- typedef&define的用法与区别
1. typedef typedef故名思意就是类型定义的意思,但是它并不是定义一个新的类型而是给已有的类型起一个别名,在这一点上与引用的含义类似,引用是变量或对象的别名,而typedef定义的是类 ...