样式表三种写法

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. git使用记录七：对工作区和暂存区的一些操作场景

    比较暂存区和HEAD所含文件的差异? 操作场景如下: 修改readme.md 文档 vi readme.md 加入到暂存区域 git add readme.md 使用git diff -cached ...

  2. mysql 【常用sql】

    修改过mysql数据库字段内容默认值为当前时间 --添加CreateTime 设置默认时间 CURRENT_TIMESTAMP ALTER TABLE `table_name` ADD COLUMN ...

  3. 《穷爸爸富爸爸——Cashflow》

    读<穷爸爸富爸爸>大约两年前了,当时对理财没什么概念,除了支付宝,就是京东小金库,哪个利率高就存哪个里.记忆中除了感觉这应该是有一定经济基础的人通常做的事,工薪阶级的自己还未达标,工资除了 ...

  4. JPA、Hibernate、Spring Data JPA 的关系，你懂吗？

    来源:https://my.oschina.net/u/3080373/blog/1828589 什么是JPA? 全称Java Persistence API,可以通过注解或者XML描述[对象-关系表 ...

  5. BCrypt密码加密

    快速入门 (1)我们从官网下载源码 BCrypt 官网 http://www.mindrot.org/projects/jBCrypt/ (2)新建工程,将源码类BCrypt拷贝到工程 (3)新建测试 ...

  6. 页面跳转到Area区域连接

    @Html.ActionLink("主页", "Index", new { controller = "Test", Action = &q ...

  7. is not an enclosing class

    public class A {public class B { }}; 需要实例B类时,按照正逻辑是,A.B ab = new A.B();那么编译器就会出现一个错误–“is not an encl ...

  8. 数组Array的十种使用方法

    第一种方法 array toString () 将数组的元素全部转换为字符串; 第二种方法 array join ("这里是分隔符") 这种方法可以把数组的元素转换为字符串,并把分 ...

  9. vector<类指针>清理

    https://www.cnblogs.com/nanke/archive/2011/05/10/2042662.html 1.vector<class> &aa,作为函数参数 2 ...

  10. egg 连接mysql 在mysql 插入数据

    1.配置mysql exports.mysql = { enable: true, package: 'egg-mysql' }; 'use strict'; module.exports = app ...