CSS学习

1：通过css来设置边框的颜色

我们可以通过border:10px solid red;来统一的设置颜色，但是我们有的时候需要每个边框的颜色不一样，我们就需要通过各自设置的方法来设置边框的颜色。

  1. <body>
  2.     <!--这里是设置边框的，设置4的方向上的，使用border来进行设置就行。-->
  3.     <div style="color:red;
  4.                                  font-family: 楷体;
  5.                                  font-size: 50px;
  6.                                  background-color: blue;
  7.                                  width:300px;
  8.                                  /*border:10px dashed red;*/
  9.                                  border-top: 10px solid red ;
  10.                                  border-bottom:10px dashed yellow;
  11.                                  border-left: 10px solid burlywood;
  12.                                  border-right: 10px solid purple;
  13.                              ">
  14.         <p>你好世界</p>
  15.         <p>你好世界</p>
  16.         <p>你好世界</p>
  17.         <p>你好世界</p>
  18.     </div>

只是通过在div中的style中写，我们要是写css一定要写在head中，切记不要这样的书写。

div中的溢出我们应该如何办。我们可以添加属性，overflow:"";我们可以选择性的进行隐藏溢出的部分。

2：行内元素设置高宽是没用的，我们必须将其设置为块级元素才能设置，比如<span>元素。

  1. span style="border:1px solid:red; width: 200px;height: 300px;">你好吗</span>

这样子是没有效果的，我们要将其设置为块状的元素才行。加上属性display:block;这样子才会显示出来效果。

3：首行缩进的方法

利用css的属性，text-indent:4em;可以实现首行缩进的功能。不再使用空格来写。

4：<margin>标签的学习

Margin标签是表示元素内边距，设置4周都会改变，<p>标签段落之间的距离就是使用了margin来调节。关于这个的理解我们可以打开F12看网页中的显示效果就可以知道了。

5：关于选择器

选择器的形式很多种，我们只需要知道经常使用的那几个就行了。在后面js和JQuery中还有选择器。

我们需要让一个选择器运用多个样式，我们需要在选择器中加个空格写上选择器的名就行，只要不重复就可以。关于选择器的优先级，是类的选择器高于标签选择器，同时id选择器高于类选择器。[Id>类>标签];在同等优先级下，谁最后定义的样式，谁显示效果。

把多个选择器可以组合在一起，这样就是多个标签都显示这个效果。

我们想要让其某个元素的优先级高可以这样设置，在其css后面加上！important就可以让其优先级高。

6:伪选择器

这个我还是第一次听说，但是以前好像看见过，就是在选择器后面冒号在写。

  1. <style type="text/css">
  2.     /*这里使用伪类来实现功能*/
  3.      a:link
  4.      {
  5.          font-family: 楷体;
  6.          color: burlywood;
  7.          text-decoration: none;
  8.      }
  9.      a:hover
  10.      {
  11.          color: yellow;
  12.          text-decoration: underline;
  13.      }
  14.      a:active {
  15.          color: red;
  16.          text-decoration: line-through;
  17.      }
  18.      a:visited {
  19.          color: black;
  20.          font-family: 宋体;
  21.      }
  22. </style>

7：文档流

将窗体自上而下分成一行行，并在每行中按从左至右的顺序排放元素。其实我们的网页就是安装文档流的形式来展示的。我们可以通过一些方法来脱离文档流，让其可以自定义显示。属性position:通过这个属性来看元素是否脱离文档流。Absolute:绝对定位，相对于整个文档，,fixed是相对于可视区域的位置，是固定定位。Relative这个是相对定位，是相对于当前的位置而言的。

8：float：布局的属性

这个最主要的是在div中使用，让其块状的元素可以自由的浮动，根据需求变化。这里的浮动也是和上面的一样，只要发生了浮动就脱离了文档流后面的元素就会跑到原来的位置，我们设置布局的时候，浮动就是要想办法将其元素放到我们想要的位置就行。

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <title></title>
  6.     <style type="text/css">
  7.         #div1 {
  8.             width: auto;
  9.             height: 100px;
  10.             background-color: yellow;
  11.         }
  12.         #div2 {
  13.             background-color: blanchedalmond;
  14.             width: auto;
  15.             height: 400px;
  16.         }
  17.         #div3 {
  18.             background-color: red;
  19.             width: auto;
  20.             height: 100px;
  21.         }
  22.         #div_left {
  23.             float: left;
  24.             width: 30%;
  25.             height: 100%;
  26.             background-color: blue;
  27.         }
  28.         #div_center {
  29.             float: left;
  30.             width: 60%;
  31.             height: 100%;
  32.             background-color: blueviolet;
  33.         }
  34.         #div_right {
  35.             float: left;
  36.             width: 10%;
  37.             height: 100%;
  38.             background-color: darkgoldenrod;
  39.  
  40.         }
  41.     </style>
  42. </head>
  43. <body>
  44.     <div id="div1"></div>
  45.     <div id="div2">
  46.         <div id="div_left"></div>
  47.         <div id="div_center">
  48.  
  49.         </div>
  50.         <div id="div_right"></div>
  51.     </div>
  52.     <div id="div3"></div>
  53. </body>
  54. </html>

9：在css文件中导入css文件

通过@import url(11.css);这种形式就可以导入别的css文件了。这是模块化的设计.

10：盒子模型的理解

就是说，这个元素的大小不是我们设置的，元素的大小是由于盒子的各方面属性盒子来决定的。以前总是写这个但是不是很理解，现在终于知道了，其实也不是很难的。

11：框架

**1:iframe:不分割当前的页面就可以嵌入某个页面**

就是可以在某个网页某个区域进行嵌入别的页面内容。

**2：frameset

可以把页面进行结构化的划分，就是每个页面都要嵌入别的页面.现在这个已经不用了。都封装到了别的里面去了。

CSS基础-插曲的更多相关文章

  1. 前端开发：css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  2. CSS基础总结

    CSS基础总结链接地址:http://segmentfault.com/a/1190000002773955

  3. CSS基础篇之了解CSS和它的基本属性

    CSS是什么? CSS英文全名是Cascading Style Sheets翻译过来就是层叠样式表,它主是把网页表现与内容分离的一种样式设计语言.这种语言能优化我们编程,把东西简化和优化写法,而且不同 ...

  4. HTML5 -入门 (---css样式-------------（css基础与css选择器）---------------------—）

    ---恢复内容开始--- 一css基础入门与css选择器 CSS英文全拼:cascading style sheet 层叠样式表. 在html中使用:要在head中写style标签,所有样式放在sty ...

  5. css 基础---选择器

    1.css基础 selector {property: value} eg: h1 {color:red; font-size:14px;} p { text-align: center; color ...

  6. 妙味课堂——HTML+CSS基础笔记

    妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...

  7. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  8. css基础不扎实

    写了两周的网页,发现自己的css基础还是很差的,当时培训学习的时候就发现了,我做的页面都特别的别扭和丑吧,在班级上应该是垫底的: 原先只知道用float,不会使用定位,网页连固定定位也不会,现在发现, ...

  9. css基础总结一

    最近在弄一个简单管理系统的前端,所以打算将做项目的一些个人感想以及总结简单罗列下,当然,主要针对前端的基础部分以及一些常用的前端个人简单技巧总结.主要分为js部分和css部分,下面是css的基础部分总 ...

随机推荐

  1. Silverlight中异步调用WCF服务，传入回调函数

    以前学的ASP.NET,调用的都是同步方法,同步方法的好处就是,一步一步走,完成这步才会走下一步.然而,WCF使用的都是异步方法,调用之后不管有没有获得结果就直接往下走,最可恶的是异步函数都是Void ...

  2. 浅谈Excel开发：六 Excel 异步自定义函数

    上文介绍了Excel中的自定义函数(UDF ),它极大地扩展了Excel插件的功能,使得我们可以将业务逻辑以Excel函数的形式表示,并可以根据这些细粒度的自定义函数,构建各种复杂的分析报表. 普通的 ...

  3. ubuntu 安装 axel

    Axel 通过打开多个 HTTP/FTP 连接来将一个文件进行分段下载,从而达到加速下载的目的.对于下载大文件,该工具将特别有用. 安装:sudo apt-get install axel 一般使用: ...

  4. Metro风格的Android界面应用

    最近项目中需要一个选择月份查询客户余额的功能,原先的android只能满足查询当月,不可以查询任意月份.当然改起来还是很简单的,服务端增加一个月份参数,客户端传入这个参数即可.闲来无事,月份的选择风格 ...

  5. C# 版 flvmerge：快速合并多个flv文件

    网上的视频很多都是分片的flv文件,怎么把他们合为一体呢?GUI工具就不考虑了,不适合批量执行,不适合在后台运行.有没有命令行工具或库可以实现呢? ffmpeg 提供了一个方法: (1)先把flv文件 ...

  6. xamarin误删vEthernet(internal Ethernet Port Windows Phone Emulator) 网络设备的处理。

    昨天一不小心误删了xamarin 开发环境下的虚拟设备网络设备.名称为:vEthernet(internal Ethernet Port Windows Phone Emulator).导致原来能正确 ...

  7. JavaScript-分支语句练习

    -1.方程 ax^2+bx+c=0,一元二次方程求根情况. 解: <head><meta http-equiv="Content-Type" content=&q ...

  8. 日志分析系统——Hangout源码学习

    这两天看了下hangout的代码,虽然没有运行体验过,但是也算是学习了一点皮毛. 架构浅谈 Hangout可以说是java版的Logstash,我是没有测试过性能,不过据说是kafka这边性能要高出L ...

  9. java的五种数据类型解析

    不知道大家对java的简单数据类型是否了解,下面针对Java的五种类型简单数据类型表示数字和字符,进行详细的讲解和分析. 一.简单数据类型初始化 在Java语言中,简单数据类型作为类的成员变量声明时自 ...

  10. Servlet字符编码过滤器，实现图书信息的添加功能，避免产生文字乱码现象的产生

    同样的代码,网上可以找到和我一模一样的代码和配置,比我的更加详细,但是我重新写一个博客的原因自是把错误的原因写出来,因为这就是个坑,我弄了一天,希望对你们有所帮助.只为初学者发现错误不知道怎么解决有所 ...