什么是CSS

层叠样式表（cascading style sheet）

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

CSS语法

行间样式

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

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

非行间样式

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

内联样式（嵌）

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

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

格式如下：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title></title>
  6.         <!--内联样式-->
  7.         <style>
  8.             /*选择器：选择添加样式的元素
  9.              *声明：属性：值*/
  10.             p{
  11.                 color: #f00;
  12.             }
  13.         </style>
  14.     </head>
  15.     <body>
  16.         <p>这是一段测试文字</p>
  17.     </body>
  18. </html>

外联样式

优先级

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

选择器

基本选择器

标签选择器

  1. html{color: black;}
  2. p{color: gray;}
  3. h2{color: silver;}

ID选择器

ID是唯一的

  1. #p1{
  2.     color: #FF0000;
  3. }
  4. <p id="p1">这是一段测试文字</p>

类选择器

  1. <style>
  2.     .box{
  3.         color: #FF0000;
  4.     }
  5. </style>
  6. <p class="box">这是一段测试文字</p>
  7. <h2 class="box">这是一段测试文字</h2>

优先级

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

高级选择器

并集选择器

  1. #p1,h2{
  2.   color:red;
  3. }

交集选择器

  1. p.box{
  2.   color:green;
  3. }

后代选择器

  1. p span{
  2.   color:red;
  3. }

通配选择器

  1. *{
  2.   color:blue;
  3. }

样式具有继承性

属性选择器

  1. [属性名]/[属性名=值]{
  2.   color:red;
  3. }

样式

文本样式

  1. color:修改文本的颜色
  2. text-align:元素的内容对齐方式(水平方向)
  3. line-height:行高
  4. text-decoration:文本修饰  none

字体样式  font

  1. font-size:字体大小
  2. div{
  3.     /*font-size:20px;
  4.     font-family: arial,"新宋体";
  5.     font-weight: bold;*/
  6.     font: bold 20px arial,"宋体";
  7. }

背景

  1. background
  2. background-color: #ccc;
  3. background-image: url(img/2.jpg);
  4. background-repeat: no-repeat;
  5. background-position: 10px 10px;*/
  6. background: #ccc url(img/2.jpg) no-repeat;

宽高

  1. width
  2. height

列表

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

其他属性

  1. display: none隐藏   block显示
  2. cursor: pointer;   可点击状态

盒子模型(div+css)

  1. border
  2. /*border-style: solid;/*边框样式*/
  3. /*border-width: 1px;
  4. border-color: green;*/
  5. border: 1px solid green;
  6. padding
  7. /*padding-left: 10px;
  8. padding-top: 10px;
  9. padding-right: 10px;*/
  10. padding: 10px 20px 10px 30px;/*上右下左*/
  11. margin
  12. /*margin-left: 20px;
  13. margin-top: 20px;*/
  14. margin: 20px 30px 40px 50px;
  15.  
  16. 盒子总宽度=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. 【原】使用Maven完成自动化打包并部署到Linux服务器下（Tomcat7）

    最近在使用maven,顺便尝试了下tomcat部署.网上找到了很多资料但是都不是最新的,所以贴上比较新的Tomcat7部署代码和配置,方便以后回顾-->测试OK. 1. 首先是配置Tomcat ...

  2. Linux线程同步——条件变量

    互斥锁是用来给资源上锁的,而条件变量是用来等待而不是用来上锁的. 条件变量用来自动阻塞一个线程,直到某特殊情况发生为止. 通常条件变量和互斥锁同时使用. 和条件变量使用有关的几个重要函数: int p ...

  3. C# NPOI 导出Execl 工具类

    NPOI 导出Execl 自己单独工具类 详见代码 using System; using System.Collections.Generic; using System.Linq; using S ...

  4. 51Nod1584 加权约数和

    这题其实就是反演一波就好了(那你还推了一下午+一晚上),不过第一次碰到\(O(n\log n)\)预处理分块和式的方法-- 不知为啥我跟唐教主的题解推的式子不太一样--(虽然本质上可能是相同的吧) 那 ...

  5. cf1097D. Makoto and a Blackboard(期望dp)

    题意 题目链接 Sol 首先考虑当\(n = p^x\),其中\(p\)是质数,显然它的因子只有\(1, p, p^2, \dots p^x\)(最多logn个) 那么可以直接dp, 设\(f[i][ ...

  6. CentOS安装Oracle 11g R2

    官方的安装链接: https://docs.oracle.com/cd/E11882_01/install.112/e24326/toc.htm#BHCGJCEA 检查硬件需求 1. 内存需求 物理内 ...

  7. ArcGIS10.3+Oracle12C+ArcGIS Server10.3安装布署(之二)

    1.创建PDB 输入 dbca 命令 2.安装完成后,连接PDBSDE的容器数据库 3.环境变量 从Oracle的官方网站下载   instantclient-basic-nt-12.1.0.2.0. ...

  8. [转]用python爬虫抓站的一些技巧总结 zz

    来源网站:http://www.pythonclub.org/python-network-application/observer-spider 学用python也有3个多月了,用得最多的还是各类爬 ...

  9. JavaScript DOM 編程藝術(2版) 綜合實例Band js代碼

    function addLoadEvent(func){ var oldonload=window.onload; if(typeof window.onload!='function') { win ...

  10. Oracle诊断工具 - ORA-4030 Troubleshooting Tool

    ORA-4030 说明Oracle服务器进程(server process)无法在操作系统(OS)上分配到足够的内存.   导致ORA-4030 的主要原因有: -物理内存不足 -OS kernel/ ...