什么是CSS

层叠样式表（cascading style sheet）

控制页面元素的显示方式。（添加样式）

CSS语法

行间样式

行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。

<p style="color: red;background: #ccc;">这是一段测试文字</p>

非行间样式

非行间样式包括内联样式和外联样式

内联样式（嵌）

嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。

属性的值是一个单词，此时不需要引号；如果是多个单词，需要添加引号。

格式如下：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <!--内联样式-->

        <style>

            /*选择器：选择添加样式的元素

             *声明：属性：值*/

            p{

                color: #f00;

            }

        </style>

    </head>

    <body>

        <p>这是一段测试文字</p>

    </body>

</html>

外联样式

优先级

行间样式 > 非行间样式（内联样式和外联样式），内联样式和外联样式由顺序结构决定，谁在下面谁决定样式。

选择器

基本选择器

标签选择器

html{color: black;}

p{color: gray;}

h2{color: silver;}

ID选择器

ID是唯一的

#p1{

    color: #FF0000;

}

<p id="p1">这是一段测试文字</p>

类选择器

<style>

    .box{

        color: #FF0000;

    }

</style>

<p class="box">这是一段测试文字</p>

<h2 class="box">这是一段测试文字</h2>

优先级

ID选择器　　>　　类选择器　　>　　标签选择器

高级选择器

并集选择器

#p1,h2{

  color:red;

}

交集选择器

p.box{

  color:green;

}

后代选择器

p span{

  color:red;

}

通配选择器

*{

  color:blue;

}

样式具有继承性

属性选择器

[属性名]/[属性名=值]{

  color:red;

}

样式

文本样式

color:修改文本的颜色

text-align:元素的内容对齐方式(水平方向)

line-height:行高

text-decoration:文本修饰  none

字体样式  font

font-size:字体大小

div{

    /*font-size:20px;

    font-family: arial,"新宋体";

    font-weight: bold;*/

    font: bold 20px arial,"宋体";

}

背景

background

background-color: #ccc;

background-image: url(img/2.jpg);

background-repeat: no-repeat;

background-position: 10px 10px;*/

background: #ccc url(img/2.jpg) no-repeat;

宽高

width

height

列表

list-style-type: none;  去除标志

其他属性

display: none隐藏   block显示

cursor: pointer;   可点击状态

盒子模型(div+css)

border

/*border-style: solid;/*边框样式*/

/*border-width: 1px;

border-color: green;*/

border: 1px solid green;

padding

/*padding-left: 10px;

padding-top: 10px;

padding-right: 10px;*/

padding: 10px 20px 10px 30px;/*上右下左*/

margin

/*margin-left: 20px;

margin-top: 20px;*/

margin: 20px 30px 40px 50px;

盒子总宽度=element的宽度+(padding+border+margin)*2

页面布局

浮动:float:left

浮动脱离文档流，挨着父级组件的左边框，浮动兄弟组件的右边框停止浮动

清除浮动:clear :   left    right   both

定位

position:

relative:相对定位(不会脱离文档流)

absolute:绝对定位

如果父级是absolute或者没有设置position,此时该组件将会向上寻找position为ralative的组件，直到window为止。

如果父级设置postion为relative，此时根据父级组件定位。

脱离文档流。

z-index:  z轴的位置

Day2 CSS的更多相关文章

  1. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  2. Day2:html和css

    Day2:html和css 表格是一种常用的标签,表格结构,做到能够合并单元格. 表格的属性: 属性名 说明 border 设置表格的边框 cellspacing 设置单元格与单元格边框之间的空白间距 ...

  3. 前端入门-day2（常见css问题及解答）

    写在前面 今天是入门前端的day2, 小伙伴们应该已经看了一些HTML的基础和CSS的基础了,是不是遇到了很多关于CSS的问题呢.因为HTML很少有太复杂的问题,所以直接写一篇关于CSS的常见问题及解 ...

  4. CSS基础-DAY2

    CSS属性操作-文本 文本颜色 <head> <style> p{ /*color:#8B5742 ;色码表*/ color: RGBA(255,0,0,0.5); /*调色, ...

  5. css day2

    外观属性 color:文本颜色 用于定义文本的颜色 1.预定义的颜色值,如red.green.blue等 2.十六进制,如#FF0000.#FF6600.#29D794等.十六进制是最常用的定义颜色的 ...

  6. 中软培训第一周复习总结 --简单的HTML 与CSS

    一些需要记住的点: day1 HTML格式及简单标签: html 文件一般格式: 1 <html> 2 <head lang="en"> 3 <met ...

  7. Day6:html和css

    Day6:html和css 复习 margin: 0; padding: 0; <!DOCTYPE html> <html lang="en"> <h ...

  8. Day5:html和css

    Day5:html和css 如何实现盒子居中问题,要让盒子实现水平居中,要满足是快级元素,而且盒子的宽度要定义.然后数值为auto即可. .dashu { width: 100px; margin: ...

  9. Python实例---模拟微信网页登录(day2)

    第三步: 实现长轮询访问服务器---day2代码 settings.py """ Django settings for weixin project. Generate ...

随机推荐

  1. Form表单和里边的小部件

    一.Form表单:form表单是用来收集用户信息,并向后台提交信息的区域表单: 1.属性 “action” 是 “行为“的意思,该属性的值表示:用户提交信息到哪个页面: 2.属性”method“ 是” ...

  2. Java - HashMap值大于128问题

    class Solution { public boolean wordPattern(String pattern, String str) { HashMap<Character,Integ ...

  3. Java8简明学习之新时间日期API

    由于历史原因,在之前的版本里无论Date还是Calendar都非常难用,尤其在涉及到日期计算方面,而且其中日期转换的类DateForamt还是非线程安全的.也正因为难用,一般项目里面都引入第三方的类库 ...

  4. Linux 文件缓存 (一)

    缓存印象 缓存给人的感觉就是可以提高程序运行速度,比如在桌面环境中,第一次打开一个大型程序可能需要10秒,但是关闭程序后再次打开可能只需5秒了.这是因为运行程序需要的代码.数据文件在操作系统中得到了缓 ...

  5. js-权威指南学习笔记7

    第七章 数组 1.数组直接量的语法允许有可选的结尾的逗号,所以[ , , ]只有两个元素而非三个. 2.调用构造函数Array()创建数组时,传入一个参数时表示指定数组的长度. 3.所有的索引都是属性 ...

  6. 事件驱动模型 IO多路复用 阻塞IO与非阻塞IO select epool

    一.事件驱动 1.要理解事件驱动和程序,就需要与非事件驱动的程序进行比较.实际上,现代的程序大多是事件驱动的,比如多线程的程序,肯定是事件驱动的.早期则存在许多非事件驱动的程序,这样的程序,在需要等待 ...

  7. Oracle EBS 启用关于此页

    FND:诊断英文为FND: Diagnostics,用于设置是否显示“关于此页”个性化自助定义英文为Personalize Self-Service Defn,用户设置在登录后,OAF页面是否显示“个 ...

  8. 使用eclipse遇到的unable to install breakpoint的问题

    调试一个tomcat工程,设置好断点,启动工程,结果出现了下面的错误: 继续运行,再进入断点之前,还会再度提示,但是最终会命中断点. 使用CGLIB查找关键字,了解到CGLIB是一个AOP的拦截库,想 ...

  9. 转：.net设计模式之单例模式

    原文地址:http://terrylee.cnblogs.com/archive/2005/12/09/293509.html 概述 Singleton模式要求一个类有且仅有一个实例,并且提供了一个全 ...

  10. Loadrunner11代理录制&各个常见功能介绍

    1.代理录制: Lr代理工具:C:\Program Files (x86)\HP\LoadRunner\bin\wplus_init_wsock.exe 1) 设置代理 配置代理信息: 2)设置浏览器 ...