样式表三种写法

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样式表及其属性)的更多相关文章

  1. css样式表及属性

    CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/    此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控 ...

  2. 为什么有时候Css样式表某个属性引用不成功?

    首次使用博客,很多东西都在探索,第一篇文章也不知道发布点什么,就随便写写,是在word里面写的,也懒得排版,将就这用吧. 闲着没事找了酷狗的API写了个简单的静态网页,完成了搜索,展示,播放功能.就想 ...

  3. 第一周复习一 ( HTML表单form)

    form <from id="" name="" method="post/get" action="">& ...

  4. CSS样式表------第一章:样式表的基本概念

    CSS(Cascading Style Sheets,层叠样式表),控制页面样式外观,作用是美化HTML网页. 一. 样式表的基本概念 1.样式表的分类 (1)内联样式表  -----放在元素的开始标 ...

  5. 【2017-03-24】CSS样式表

    CSS样式表:层叠式样式表 一.样式表的分类 1.内联式 写在标记的属性位置,优先级最高,重用性最差. 格式: <div style="width:100px;height:100px ...

  6. WEB入门 四 CSS样式表深入

    学习内容 Ø        CSS选择器深入学习 Ø        CSS继承 Ø        CSS文本效果 Ø        CSS图片效果 能力目标 Ø        掌握CSS选择器的组合声 ...

  7. WEB入门三 CSS样式表基础

    学习内容 Ø        CSS的基本语法 Ø        CSS选择器 Ø        常见的CSS样式 Ø        网页中3种使用CSS的方式 能力目标 Ø        理解CSS的 ...

  8. CSS样式表、JS脚本加载顺序与SpringMVC在URL路径中传参数与SpringMVC 拦截器

    CSS样式表和JS脚本加载顺序 Css样式表文件要在<head>中先加载,这样网页显示时可以第一次就渲染出正确的布局和样式,网页就不会闪烁,或跳变 JS脚本尽可能放在<body> ...

  9. 深度理解CSS样式表,内有彩蛋....

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 关于linux的一些常用的指令

    top:命令经常用来监控linux的系统状况,比如cpu.内存的使用. free:观察内存使用. Find:查找指定的文件. Whereis:查找指定的文件源和二进制文件和手册等 Which:用于查询 ...

  2. 学习contiki需要知道的一些概念和注意事项

    概念: 1.宏:所谓宏,就是一些命令组织在一起,作为一个单独命令完成一个特定任务.Microsoft Word中对宏定义为:“宏就是能组织到一起作为一独立的命令使用的一系列word命令,它能使日常工作 ...

  3. Scrapy框架: Request回调函数

    Request回调函数 def parse_page1(self, response): return scrapy.Request("http://www.example.com/some ...

  4. vue中给请求来的数据List ,添加属性false 后,赋值不上问题解决办法

    data() { return { list:[ // 添加属性fale 后的值 ], // 测试数据 goList:[ { name:'张三', phone:'18621958665' }, { n ...

  5. fieldset与legend,label

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 了解JSON Web令牌(JWT)

    JSON Web Token(JWT)是目前最流行的跨域身份验证解决方案.今天给大家介绍JWT的原理和用法. 1.跨域身份验证 Internet服务无法与用户身份验证分开.一般过程如下. 1.用户向服 ...

  7. spring3.0+jsf+ibatis整合

    user.xml <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE sqlMap PUBLI ...

  8. 回车\r的含义

    package main import "fmt" func main() { // \r 回车,从当前行的最前面开始输出,覆盖掉以前的内容 // 输出:曹操刘备关羽 fmt.Pr ...

  9. html中代替空格、大于号、小于号等字符编码

    数字表示法的不方便之处,在于必须知道每个字符的码点,很难记忆.为了能够快速输入,HTML 为一些特殊字符,规定了容易记忆的名字,允许通过名字来表示它们,这称为实体表示法(entity). 实体的写法是 ...

  10. 【转载】linux查看端口状态相关命令

    具体命令移步:https://www.cnblogs.com/cxbhakim/p/9353383.html