CSS教程学习笔记

CSS教程学习笔记

教程链接：CSS教程-菜鸟教程

CSS简介

CSS-层叠样式表（Cascading Style Sheets）

• 定义如何显示HTML元素
• 作用等同于 HTML 中的字体标签和颜色属性
• 样式通常保存在外部的 .css 文件中，我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观

CSS插入方式

• 内联样式：在HTML元素中使用style属性
• 内部样式表：在头部区域使用

  CSS语法

  选择器    一条/多条声明

  选择器：需要改变样式的 HTML 元素
  声明：{属性:值;属性:值;…;}

  不要在属性值与单位之间留有空格（如：“margin-left: 20 px” )

  示例

  /*注释*/
  body {background-color:yellow;}
  h1   {font-size:36pt;}
  p {color:red;text-align:center;}
  
  

  选择器

  类名

  直接指定某一类，见上例

  id选择器

  以"#"定义,可以为特定id的HTML原色指定特定样式
  *ID属性尽量不要以数字开头（不适用于Mozilla/Firefox 浏览器）
  示例

  
  
  
  
  
  
  
  
  
  Hello World!
  这个段落不受该样式的影响。
  
  
  

  class选择器

  以"."号定义，用于描述一组元素的样式/指定特定HTML元素
  示例

  
  
  
  
  
  
  
  
  
  标题居中
  段落居中。
  
  
  

  属性选择器

  [title]			/*包含title属性的所有元素变为蓝色*/
  {
      color:blue;
  }
  
  [title=runoob]  /*title属性值为"runoob"的所有元素*/
  {
      border:5px solid green;
  }
  
  [title~=runoob] { color:blue; }   /*title属性值包含"runoob"的所有元素*/
  [title|=unoob] { color:blue; }    /*title属性值以"runoob"开头的所有元素*/
  
  input[type="text"]
  {
      width:150px;
      display:block;
      margin-bottom:10px;
      background-color:yellow;
  }
  

  常用属性

  背景

  • background-color
  • background-image
  • background-repeat
  • background-attachment  (fixed/scroll/inherit,背景图像是否固定或者随着页面的其余部分滚动)
  • background-position

  body {background-color:#ff0000;}
  body {background-color:rgb(255,0,0);}
  body {background-color:red;}
  
  body {background-image:url('paper.gif');} /*默认情况下，背景图像进行水平/垂直平铺重复显示，以覆盖整个元素实体.*/
  /*repeat-x 仅水平平铺*/
  /*repeat-y 仅垂直平铺*/
  body
  {
  background-image:url('gradient2.png');
  background-repeat:no-repeat;  /*不平铺*/
  background-position:right top; /*改变图像在背景中的位置，默认与文本显示同一位置*/
  }
  
  /*背景简写属性*/
  /*color image repeat attachment position*/
  body {background:#ffffff url('img_tree.png') no-repeat right top;}
  

  文本格式

  • color
  • text-align  对齐方式（相对于整个元素）
  • text-decoration  设置或删除文本的装饰，主要是用来删除链接的下划线
  • text-transform  文本转换（大小写、首字母大写）
  • text-indent  文本缩进

  body {color:red;}
  h1 {color:#00ff00;}
  h2 {color:rgb(255,0,0);}
  
  h1 {text-align:center;}
  p.date {text-align:right;}
  p.main {text-align:justify;}
  
  a {text-decoration:none;}
  h1 {text-decoration:overline;}
  h2 {text-decoration:line-through;}
  h3 {text-decoration:underline;}
  
  p.uppercase {text-transform:uppercase;}
  p.lowercase {text-transform:lowercase;}
  p.capitalize {text-transform:capitalize;}
  
  p {text-indent:50px;}
  

  字体

  • font-family 字体系列
  • font-style 字体样式(斜体)
  • font-size  字体大小(绝对大小/相对大小)
  • font-weight  normal/lighter/bold
  • font-variant  nromal/small-caps

  p{font-family:"Times New Roman", Times, serif;}
  
  p.normal {font-style:normal;}
  p.italic {font-style:italic;}
  
  h1 {font-size:40px;}
  h1 {font-size:2.5em;} /* 40px/16=2.5em */
  h2 {font-size:100%;}  /*元素的默认字体大小的是百分比*/
  

  链接

  可用任何CSS属性修饰链接四个状态

  a:link {color:#000000;text-decoration:none;}      /* 未访问链接*/
  a:visited {color:#00FF00;}   /* 已访问链接 */
  a:hover {color:#FF00FF;text-decoration:underline;}    /* 鼠标移动到链接上 */
  a:active {color:#0000FF;}   /* 鼠标点击时 */
  *注意顺序*
  
  a:link,a:visited
  {
  	display:block;
  	font-weight:bold;
  	color:#FFFFFF;
  	background-color:#98bf21;
  	width:120px;
  	text-align:center;
  	padding:4px;
  	text-decoration:none;
  }
  a:hover,a:active
  {
  	background-color:#7A991A;
  }
  

  列表

  /*列表项标记*/
  ul.a {list-style-type: circle;}
  ul.b {list-style-type: square;}
  ol.c {list-style-type: upper-roman;}
  ol.d {list-style-type: lower-alpha;}
  
  /*指定列表项标记的图像*/
  ul
  {
      list-style-image: url('sqpurple.gif');
  }
  
  /*相对元素，表项的位置*/
  ul {list-style-position: inside;}
  ul {list-style-position: outside;}
  

  盒子模型

  

  div {
      width: 300px; /*内容Content的宽度*/
  
      padding: 25px; /*内边距*/
      border: 25px solid green; /*边框*/
      margin: 25px; /*外边距，透明*/
  }
  

  显示与可见性

  h1.hidden {visibility:hidden;}  /*仍占据空间*/
  
  h1.hidden {display:none;}  /*不占据空间*/
  li {display:inline;} /*转为内联元素*/
  span {display:block;} /*转为块元素*/
  

  定位

  position属性，五个值

  • static （默认值，没定位）
  • relative （相对其正常位置，但它原本所占的空间不会改变）
  • fixed （相对于浏览器窗口）
  • absolute （相对于最近的已定位父元素/）
  • sticky （依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换）

  光标

  cursor属性

  复杂选择器

  组合与嵌套选择器

  h1,h2,p
  {
      color:green;
  }
  
  p  /*为所有 p 元素指定一个样式*/
  {
      color:blue;
      text-align:center;
  }
  .marked  /*为所有 class="marked" 的元素指定一个样式*/
  {
      background-color:red;
  }
  .marked p  /*为所有 class="marked" 元素内的 p 元素指定一个样式*/
  {
      color:white;
  }
  p.marked  /*为所有 class="marked" 的 p 元素指定一个样式*/
  {
      text-decoration:underline;
  }
  

  组合选择器

  CSS3中包含了四种组合方式:

  div p  /*后代选择器,选取所有插入到 
   元素中的 
   元素*/
  {
    background-color:yellow;
  }
  
  div>p  /*子元素选择器，选择
  元素中所有直接子元素 
  */
  {
    background-color:yellow;
  }
  
  div+p  /*相邻兄弟选择器，选取了所有位于 
   元素后的第一个 
   元素*/
  {
    background-color:yellow;
  }
  
  div~p  /*后续兄弟选择器，选取了所有 
   元素之后的所有相邻兄弟元素 
   */
  {
    background-color:yellow;
  }
  

  伪类

  CSS伪类用来添加一些选择器的特殊效果
  语法：

  selector:pseudo-class {property:value;}
  selector.class:pseudo-class {property:value;}
  

  • 与CSS类配合使用（a标签）
  • first-child伪类（选择所有作为第一个子元素的该元素）
  • lang伪类（为不同语言定义特殊规则）

  a:link {color:#FF0000;} /* 未访问的链接 */
  a:visited {color:#00FF00;} /* 已访问的链接 */
  a:hover {color:#FF00FF;} /* 鼠标划过链接 */
  a:active {color:#0000FF;} /* 已选中的链接 */
  
  p:first-child  /*匹配作为任何元素的第一个子元素的 
   元素*/
  {
      color:blue;
  }
  
  p:first-child i  /*匹配所有作为元素的第一个子元素的 
   元素中的所有  元素*/
  {
      color:blue;
  }
  
  q:lang(no) {quotes: "~" "~";}   /*为属性值为 no 的q元素定义引号的类型*/
  

  更多伪类

  伪元素

  CSS伪元素是用来添加一些选择器的特殊效果

  语法

  selector:pseudo-element {property:value;}
  selector.class:pseudo-element {property:value;}
  

  • :first-line 用于向文本的首行设置特殊样式（只能用于块级元素）
  • :first-letter 用于向文本的首字母设置特殊样式（只能用于块级元素）
  • :before 在元素的内容前面插入新内容（默认同行）
  • :after 在元素的内容后面插入新内容（默认同行）
    同一/类元素可以结合多个伪元素

  示例

  p:first-line
  {
      color:#ff0000;
      font-variant:small-caps;
  }
  
  p.article:first-letter {color:#ff0000;}
  
  

  媒体类型

  指定文件将如何在不同媒体呈现

  @media规则

  允许在相同样式表为不同媒体设置不同的样式

  @media screen
  {
      p.test {font-family:verdana,sans-serif;font-size:14px;}
  }
  @media print
  {
      p.test {font-family:times,serif;font-size:10px;}
  }
  @media screen,print
  {
      p.test {font-weight:bold;}
  }
  

  常用模板

  CSS导航栏

  
  <--全屏高度的固定垂直导航栏-->
  
  
  
  
  
  
  
  
  
    
  主页
    
  新闻
    
  联系
    
  关于
  
  
  
    
  Fixed Full-height Side Nav
    
  Try to scroll this area, and see how the sidenav sticks to the page
    
  Notice that this div element has a left margin of 25%. This is because the side navigation is set to 25% width. If you remove the margin, the sidenav will overlay/sit on top of this div.
    
  Also notice that we have set overflow:auto to sidenav. This will add a scrollbar when the sidenav is too long (for example if it has over 50 links inside of it).
    
  Some text..
    
  Some text..
    
  Some text..
    
  Some text..
    
  Some text..
    
  Some text..
    
  Some text..