第一周复习二 (CSS样式表及其属性)
样式表三种写法
1内联写法:style直接写在标签内。个人感觉多用于个别标签,一般情况优先级较高
style="font-size:16px;"
2内嵌写法:写在<head></head>标签内。个人感觉多用于较多或通用的一类标签,用来减少工作量
<style type="text/css">
{}
</style>
分为三种:
标签选择器
<style type="text/css">
标签名(类如div){ }
</style>
类选择器
<style type="text/css">
.class{}
</style>
id选择器
<style type="text/css">
#id{ }
</style>
特别的
*表示对所有元素起作用
<style type="text/css">
*{
}
</style>
三种复合选择器
并列,用,
<style type="text/css">
标签名,#id{
}
</style>
子代,用空格
<style type="text/css">
table td{
}
</style>
筛选,用.
<style type="text/css">
牌
p.sp{
}
</style>
3外部样式表
<Link rel="stylesheet" type=‘text/css‘"href=’’"/>
这里用href
常用属性
1· 背景与前景
background-color:;背景色,
background-image:url(); 设置背景图片
background-attachment:fixed; 背景固定
background-repeat:no-repeat; 不平铺
background-position:center;背景图居中,设置背景图位置时,repeat必须为no-repeat
2字体
font-family:字体
color:文字颜色
font-size:18px; 字体大小(12px,14px,18px)
font-weight:normal;bold加粗
font-style:italic; 倾斜
text-decoration:overline; 下划线
text-align:center; (水平)居中对齐
vertical-align:middle; (垂直)居中对齐;与行高同用
line-height:行高
3边界与边框
border:5px solid red; 红色,5像素
margin:50px; 外边框宽度50像素
margin-top:50px; 上边外边框宽度50像素
margin:20px 0px 20px 0px; 顺序:上右下左,时钟顺时针顺序
padding:50px; 内间距50像素
padding-top:50px; 内上边框50像素
padding:50px 20px 10px 20px; 顺序为上右下左,时钟顺时针顺序
第一周复习二 (CSS样式表及其属性)的更多相关文章
- css样式表及属性
CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/ 此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控 ...
- 为什么有时候Css样式表某个属性引用不成功?
首次使用博客,很多东西都在探索,第一篇文章也不知道发布点什么,就随便写写,是在word里面写的,也懒得排版,将就这用吧. 闲着没事找了酷狗的API写了个简单的静态网页,完成了搜索,展示,播放功能.就想 ...
- 第一周复习一 ( HTML表单form)
form <from id="" name="" method="post/get" action="">& ...
- CSS样式表------第一章:样式表的基本概念
CSS(Cascading Style Sheets,层叠样式表),控制页面样式外观,作用是美化HTML网页. 一. 样式表的基本概念 1.样式表的分类 (1)内联样式表 -----放在元素的开始标 ...
- 【2017-03-24】CSS样式表
CSS样式表:层叠式样式表 一.样式表的分类 1.内联式 写在标记的属性位置,优先级最高,重用性最差. 格式: <div style="width:100px;height:100px ...
- WEB入门 四 CSS样式表深入
学习内容 Ø CSS选择器深入学习 Ø CSS继承 Ø CSS文本效果 Ø CSS图片效果 能力目标 Ø 掌握CSS选择器的组合声 ...
- WEB入门三 CSS样式表基础
学习内容 Ø CSS的基本语法 Ø CSS选择器 Ø 常见的CSS样式 Ø 网页中3种使用CSS的方式 能力目标 Ø 理解CSS的 ...
- CSS样式表、JS脚本加载顺序与SpringMVC在URL路径中传参数与SpringMVC 拦截器
CSS样式表和JS脚本加载顺序 Css样式表文件要在<head>中先加载,这样网页显示时可以第一次就渲染出正确的布局和样式,网页就不会闪烁,或跳变 JS脚本尽可能放在<body> ...
- 深度理解CSS样式表,内有彩蛋....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- 关于linux的一些常用的指令
top:命令经常用来监控linux的系统状况,比如cpu.内存的使用. free:观察内存使用. Find:查找指定的文件. Whereis:查找指定的文件源和二进制文件和手册等 Which:用于查询 ...
- 学习contiki需要知道的一些概念和注意事项
概念: 1.宏:所谓宏,就是一些命令组织在一起,作为一个单独命令完成一个特定任务.Microsoft Word中对宏定义为:“宏就是能组织到一起作为一独立的命令使用的一系列word命令,它能使日常工作 ...
- Scrapy框架: Request回调函数
Request回调函数 def parse_page1(self, response): return scrapy.Request("http://www.example.com/some ...
- vue中给请求来的数据List ,添加属性false 后,赋值不上问题解决办法
data() { return { list:[ // 添加属性fale 后的值 ], // 测试数据 goList:[ { name:'张三', phone:'18621958665' }, { n ...
- fieldset与legend,label
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 了解JSON Web令牌(JWT)
JSON Web Token(JWT)是目前最流行的跨域身份验证解决方案.今天给大家介绍JWT的原理和用法. 1.跨域身份验证 Internet服务无法与用户身份验证分开.一般过程如下. 1.用户向服 ...
- spring3.0+jsf+ibatis整合
user.xml <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE sqlMap PUBLI ...
- 回车\r的含义
package main import "fmt" func main() { // \r 回车,从当前行的最前面开始输出,覆盖掉以前的内容 // 输出:曹操刘备关羽 fmt.Pr ...
- html中代替空格、大于号、小于号等字符编码
数字表示法的不方便之处,在于必须知道每个字符的码点,很难记忆.为了能够快速输入,HTML 为一些特殊字符,规定了容易记忆的名字,允许通过名字来表示它们,这称为实体表示法(entity). 实体的写法是 ...
- 【转载】linux查看端口状态相关命令
具体命令移步:https://www.cnblogs.com/cxbhakim/p/9353383.html