样式表三种写法

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. 转：父类私有变量是否被子类继承详细解说（答案：内存中存在，但sun公司定义为不继承）

    应作者要求,本处提供一个连接,表示对原作者版权尊重. https://blog.csdn.net/mr_duantao/article/details/50966471

  2. VC++DLL动态链接库程序

    VC++DLL动态链接库程序 VC++DLL动态链接库程序 C++ DLL 导出函数 使用VS2017等IDE生成dll程序,示例如下: C++ DLL 导出类 1.导出类中第一种方法:简单导出类(不 ...

  3. 解决“每次打开office2010的word都会出现配置进度框”问题

       在win7中安装完office2010后.打开 *.doc文件时,总会弹出"配置进度框"问题,解决例如以下:  1)点击"開始"-->"执 ...

  4. Yii 1.1 cookie删不掉

    我的cookie是这样设置的: $cookie = new CHttpCookie('username','Jack'); $cookie->expire = time()+60*60*24*3 ...

  5. 关于清除浮动的n中方式

    我们在对页面进行布局的时候经常会用到浮动布局,浮动布局能够很好的实现我们想要的布局效果,同时兼容方面也是很好的,但是当我们在用左右浮动进行页面布局的时候,由于元素浮动脱了了文档流导致浮动元素的父级高度 ...

  6. PHP语言基础练习20191024

    <style>*{font-size: 30px;}</style> //传地址  &<?phpfunction sum($a,&$b){ $c=$a+$ ...

  7. 使用extract-text-webpack-plugin处理css文件路径问题

    首先看到我们的文件夹目录如下: webpack.config.js //解析分离cssconst ExtractTextPlugin = require('extract-text-webpack-p ...

  8. linux c 链接详解2-定义和声明

    2定义和声明 摘自:linux c编程一站式学习 可以学会extern和static用法,头文件知识. 2.1. extern和static关键字 在上一节我们把两个程序文件放在一起编译链接,main ...

  9. SpringMvc返回给前端数据@ResponseBody响应体【支持Ajax】

    1).在Controller中写 //@ResponseBody响应体是jackson包提供的 用于将Controller的方法返回的对象,通过HttpMessageConverter接口转换为指定格 ...

  10. USB转串口CH340接线方法

    https://blog.csdn.net/wangjiaweiwei/article/details/49612207 USB转串口模块可以使用5V电压供电,需要将跳帽按下图安装. USB转串口模块 ...