0312-css样式(选择器、文本text、字体fonts、背景background)
问题:
1.css中table{border:1px;}是定义table的样式,只有表格的外边框,不能实现<table border="1"></table>(单元格边框)的效果。
通过css设置表格(单元格)边框的代码示例:
/*方法一:通过设置td边距实现效果*/
table{
border-collapse: collapse;
}
td{
border:1px solid #ccc;
}
/*通过table和td的背景颜色设置边框*/
table{
background:red;
}
td{
background: #FFFFFF;
border-spacing: 1px;
}
2.在设置多个父级div,内嵌多个浮动子级div时,没有对父级div设置高度,导致位置错乱。
3.对列表标签ul/ol设置list-style-position:inside,可使列表前缀在li里面,方便加边框等样式。
4.同一标签,同时有id选择器和class选择器,class在上,id在下定义相同样式时为id样式;id在上,class在下时同样为id样式。--id优先级大于class
5.代码管理,文件类型要分开
6.id和class起名字注意命名规范:字母数字下划线,数字不能开头
7.文件名不要是中文
内容整理:
关于css:
css注释:/*注释内容 */
内联(行内):写在标签里面,以属性的形式,属性名是style。 //优先级最高,不推荐。
内嵌:写在head标签内,以标签的形式,标签名是style。 //写法:选择器{ 样式 }
外部:写在head标签内,以标签的形式,标签名是link
<link rel="stylesheet" href="*.css" />
选择器:
标签选择器:根据标签名找 //p{} div{}
id选择器:根据id的属性值来找元素 //id的属性值 #id
class选择器:根据class的属性值来找元素 //class的属性值 .class
并列:选择器1,选择器2{} //关键符号 ,
后代:父选择器 子选择器 //关键符号 空格
*{}:所有
背景:background
body{background:#fff url("img.img") no-repeat right top;}
简写属性值的顺序:
background-color:背景颜色
background-image:背景图像
background-repeat:背景图片的平铺 //水平、竖直、不平铺...
background-attachment:背景图像随页面其他部分的滚动或固定 //默认scroll滚动
background-position:背景图像的位置 //可设置px和百分比,默认先上下再左右,与边距的设置相反
另外:background-size:背景图像的缩放
文本:text
color:文本颜色
direction:文本方向 //横向/竖向
letter-spacing:字符间距 //abc a b c
line-height:行高 //经常用来设置文本的垂直居中,最好对一行使用,如果有换行会影响标签高度
text-align:文本的对齐方式 //居中,左对齐,右对齐,两端对齐
text-decoration:修饰文本 //下划线(非链接文本不建议使用),上划线,删除线
text-indent:首行缩进 //可设置px和em;2em=当前字号的两个字符
text-shadow:文本阴影
vertical-align:文本的垂直对齐 //top、middle、bottom
word-spacing:设置字间距
字体:fonts
font-family:字体
font-size:字号
font-style:字体样式 //默认normal;italic:斜体;oblique:倾斜(字体没有斜体时浏览器可仿oblique实现效果)
font-weight:字体的粗细 //实现<b></b>的效果,100-700
0312-css样式(选择器、文本text、字体fonts、背景background)的更多相关文章
- JS实战 · 仿css样式选择器
代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/ ...
- CSS样式选择器优先级
CSS样式选择器分为4个等级,a.b.c.d,可以以这四种等级为依据确定CSS选择器的优先级. 1.如果样式是行内样式(通过Style=””定义),那么a=12.b为ID选择器的总数3.c为Class ...
- CSS样式选择器
<!-- css样式选择器 HTML选择器 类选择器 ID选择器 关联选择器 组合选择器 伪元素选择器 selector{ /* selector是样式选择器 property:value; / ...
- 前端基础:CSS样式选择器
前端基础:CSS样式选择器 CSS概述 CSS是Cascading Style Sheets的简称,中文意思是:层叠样式表,对html标签的渲染和布局.CSS规则由两个主要的部分组成:1.选择器:2. ...
- 在线生成CSS样式和兼容的字体格式
http://www.fontsquirrel.com/tools/webfont-generator 在线生成CSS样式和兼容的字体格式.
- css 样式控制文本过长实现省略号
css 样式控制文本过长实现省略号 .topicTitle{ text-overflow: ellipsis; max-width: 75%; overflow: hidden; white-spac ...
- 【CSS复合选择器、元素显示模式、背景】前端小抄(3) - Pink老师自学笔记
[CSS复合选择器.元素显示模式.背景]前端小抄(3) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS的复合选择器 1.1 什么是复合选择器 在 CSS 中,可以根据选 ...
- html添加css——样式选择器
如何给html添加样式.两种方法: 一.新建立一个css样式表,与原html同目录,然后通过link标签链接.如:<link type="text/css" rel=&quo ...
- Web前端新人之CSS样式选择器
最近在学习css样式.那么我就想先整理一下css样式的选择器 规则结构: 每个规则都有两个基本部分:选择器和声明块.声明块由一个或者多个声明组成,每个声明则是一个属性—值对(property-valu ...
- css样式——选择器(三)
https://www.cnblogs.com/haiyan123/p/7552235.html 1.怎么找到标签 2.如何操作标签的对象 一.css概述 CSS是Cascading Style Sh ...
随机推荐
- [poj2585]Window Pains_拓扑排序
Window Pains poj-2585 题目大意:给出一个4*4的方格表,由9种数字组成.其中,每一种数字只会出现在特定的位置,后出现的数字会覆盖之前在当前方格表内出现的.询问当前给出的方格表是否 ...
- 使用cocopod管理第三方
扭捏了两年多一直不愿意使用cocopod来管理第三方,一直感觉直接拖拽第三方就挺方便的,直到今天使用第三方库WebViewJavascriptBridge,拖拽一直有问题,不得已研究.使用了cocop ...
- git解决修改代码后无法push的问题failed to push some refs to 'ssh://git@xxx.xxx.xx/xx.git'
今天在使用git提交代码的时候,犯了个很低级的错误,按照一切流程当我add并commit提交代码,最后使用push到远程仓库, 接下来奇怪的事情发生了,push之后,查看远程仓库代码并没有发现提交记录 ...
- Java的LockSupport工具,Condition接口和ConditionObject
在之前我们文章(关于多线程编程基础和同步器),我们就接触到了LockSupport工具和Condition接口,之前使用LockSupport工具来唤醒阻塞的线程,使用Condition接口来实现线程 ...
- php设计模式七 ---组合模式
1.介绍 组合模式(Composite Pattern),又叫部分整体模式,是用于把一组相似的对象当作一个单一的对象.组合模式依据树形结构来组合对象,用来表示部分以及整体层次.这种类型的设计模式属于结 ...
- Java基础学习笔记十三 常用API之正则表达式、Date、DateFormat、Calendar
正则表达式 正则表达式(英语:Regular Expression,在代码中常简写为regex).正则表达式是一个字符串,使用单个字符串来描述.用来定义匹配规则,匹配一系列符合某个句法规则的字符串.在 ...
- SpringMVC之处理流程
之前在学servlet时写过JavaWeb与Asp.net工作原理比较分析,那篇主要是大致描述了下servlet的工作流程,今天在家了解了下springmvc的工作原理,与asp.net中的mvc进行 ...
- 网络1711班 C语言第一次作业批改总结
Testing 总结 1 本次作业评分规则 1.1 基本要求(1分) 按时交 - 有分 未交 - 0分 迟交一周以上 - 倒扣本次作业分数 抄袭 - 0分 博客作业格式不规范,没有用Markdown语 ...
- 201621123050 《Java程序设计》第12周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 面向系统综合设计-图书馆管理系统或购物车 使用流与文件改造你的图书馆管理系统或购物车. 2.1 简述如何 ...
- 201621123057 《Java程序设计》第6周学习总结
1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图或相关笔记,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰 ...