CSS

AXIN
240 阅读9分钟

教程内容

(1) 背景background

  • background-color:red
  • backgrounf-image:url('image.jpj')
  • background-repeat:repeat-x/ repeat-y/ no-repeat
  • background-position:right/ left/ top/ bottom/..
  • background-attachment:fixed/scroll/local
    fixed:背景相对于视口固定，不随滚动元素滚动(里外都不动)
    local：相对于元素内容固定，随滚动元素滚动（里外都动）
    scroll:相对于元素本身固定，不随内容滚动（类似fixed），随外边框滚动（里面不动，外面和元素固定随元素动）

(2) 文本text

  • text-align:center/right/justify
  • text-decoration:none/overline/line-through/underline
  • text-transform:uppercase/lowercase/capitalize(每个单词首字母大写)
  • text-indent:50px(首行缩进) 其他属性：line-height/letter-spacing/word-spacing/vertical-align/text-shadow(2px 2px red)

(3)字体font

  • font-family:"Times New Roman", Times, serif
  • font-style:normal/italic(斜体字)/oblique(让没有斜体属性的字体倾斜)
  • font-size:16px(=1em默认情况)/2.5em(=40px)
    body{ font-size:100% }
  • font-weight:normal/lighter/bold/900

(4)链接link

  • a:link(未访问)/visited/hover/active 顺序！
    a:link{color:red;text-decoration:underline;background-color:blue;}

(5)列表样式ul/ol

  • ul.a{list-style-type:circle/square}
  • ol.b{list-style-type:upper-roman/lower-alpha}
  • ul{list-style-image:url('image.jpg')}
  • ul{list-style-position:0px 5px}(左边0，上下5)
  • ul{list-style:square 0px 5px url('image.jpg')}(属性简写)

(6)表格table

  • table,th,td{border:1px solid black}
  • table{border-collapse:collapse } (折叠边框)
  • table{width:100%} th{height:50px}
  • tabel{text-align:center/right/left;vertical-align:top/bottom/center}
  • td{padding:10px}(控制空格大小)
  • th{background-color:green;color:white}
  • caption{caption-side:bottom}(设置表格标题)

(7)盒子模型box model

  • width/height padding border margin

(8)边框属性border

  • border-style:none/dotted/dashed/solid/double/groove/ridge/inset/outset
  • border-width:2px/1em/thick/medium/thin
  • border-color:red
  • border{5px solid red}(简写)

(9)轮廓outline

  • outline:red solid 3px
  • outline-color outline-style outline-width

(10)margin padding

  • margin{2cm/25%/10px} +padding{}

(11)分组和嵌套

\* 选择所有元素 .class 选择一个类
p.class 类为class的p标签 .class p 类class内的所有p标签
h1,h2,h3 所有h1,h2,h3元素 tabel th 元素内的所有th元素

(12)显示display和visibility

  • display:none/inline/block/inline-block
  • visibility:hidden/visible/collapse
    display:none表示不显示元素，不占用位置；visibility:hidden表示隐藏元素，占用位置
    display:inline-block表示块级内联，如使li元素水平分布，同时能改变内外边距，高度宽度等
    块级元素：address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li
    内联元素：a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var
    可变元素(根据上下文关系确定该元素是块元素还是内联元素)：applet ,button ,del ,iframe , ins ,map ,object , script

(13)定位position

  • position:static/relative/fixed/absolute/sticky
    static: 默认值，跟随文档流，不受top,left等影响
    relative：相对正常位置，移动相对位置的元素，原本所占空间不变，经常被用来作为绝对定位元素的容器块（？）。
    fixed：相对于视口固定的定位，与文档流无关，不占用位置
    absolute：相对于最近的已定位父元素，如果没有，就相对于<html>，与文档流无关，不占用位置
    sticky:基于滚动位置定位，在阈值内随元素滚动，超出阈值就相对于视口固定。如设置top:0，则当元素移动到了top为0的位置时就固定了。

(14)布局overflow

  • overflow:visible/hidden/scroll/auto/inherit

    | 值 | 描述 | |----------|------------| | visible | 默认值，内容不会被修剪，会呈现在元素框之外| | hidden | 内容会被修剪，并且其余内容不可见| | scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容| |auto |如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容| |inherit |规定应该从父元素继承overflow的值|

(15)清除浮动

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

(16)布局 水平&垂直对齐

  • 元素居中对齐：.center { margin: auto; width: 50%; border: 3px solid green; padding: 10px; }
  • 文本居中对齐：.center{text-align:center}
  • 图片居中对齐：img{display: block; margin: 0 auto;}

左右对齐两种方法：

(1)float方式

body{
   margin: 0; 
   padding: 0
}

.right{ 
    width: 300px; 
    float: right; 
    border: 1px solid red; 
    padding: 2px 
}

右侧浮动图片溢出可以添加类.clearfix{ overflow:auto}撑大父元素

(2)position方式

body {
    margin: 0;
    padding: 0;
}

.container {
    position: relative;
    width: 100%;
}

.right {
    position: absolute;
    right: 0px;
    width: 300px;
    background-color: #b0e0e6;
}

垂直居中对齐的三种方法：

(1)padding方式

.center{
     padding:70px 0px;
     border:3px solid red
}

垂直水平居中：
.center {
    padding: 70px 0;
    border: 3px solid green;
    text-align: center;
}

(2)inline-height方式

.center{ 
     inline-height: 200px;
     height: 200px; 
     text-align: center}

如果文本有多行：
.center p {
    inline-height: 1.5;
    display: inline-block;
    vertical-align: middle;
}

(3)position和transform方式

.center { 
    height: 200px;
    position: relative;
    border: 3px solid green; 
}

.center p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

(17)组合选择符

  • div p 后代选择器 后代中的p
  • div>p 子元素选择器 直接子元素p
  • div+p 相邻兄弟选择器 后面第一个相邻兄弟p
  • div~p 后续兄弟选择器 后面所有相邻兄弟p

(18)伪类(Pseudo-classes) :link :visited :hover :active

  • 伪类的语法selector:pseudo-class {property:value;}
  • CSS类使用伪类selector.class:pseudo-class {property:value;}

(19)伪元素Pseudo-element ::before ::after

  • 伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。

  • 与伪类针对特殊状态的元素不同的是，伪元素是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。

示例展示了用::after伪元素，attr()CSS表达式和一个自定义数据属性 data-descr 创建一个纯CSS, 词汇表提示工具。

<p>这是上面代码的实现<br />
  我们有一些 <span data-descr="collection of words and punctuation">文字</span> 有一些
  <span data-descr="small popups which also hide again">提示</span>。<br />
  把鼠标放上去<span data-descr="not to be taken literally">看看</span>.
</p>

span[data-descr] {
  position: relative;
  text-decoration: underline;
  color: #00F;
  cursor: help;
}

span[data-descr]:hover::after {
  content: attr(data-descr);
  position: absolute;
  left: 0;
  top: 24px;
  min-width: 200px;
  border: 1px #aaaaaa solid;
  border-radius: 10px;
  background-color: #ffffcc;
  padding: 12px;
  color: #000000;
  font-size: 14px;
  z-index: 1;
}

(20)导航栏

垂直导航栏

ul {
      padding: 0;
      margin: 0;
      list-style-type: none;
      overflow: auto;
      height: 100%;
      width: 25%;
      background-color: #f1f1f1;
      position: fixed;

    }
    
    li a {
      display: block;
      text-decoration: none;
      padding: 8px 16px;
      color: #000;
    }

    li a.active {
      background-color: #4CAF50;
      color: white;
    }

    a:hover:not(.active) {
      background-color: #555;
      color: black;
    }

<ul>
    <li><a class="active" href="#home">主页</a></li>
    <li><a href="#news">新闻</a></li>
    <li><a href="#contact">联系</a></li>
    <li><a href="#about">关于</a></li>
  </ul>

  <div style="margin-left:25%;padding:1px 16px;height:1000px;">
    <h2>Fixed Full-height Side Nav</h2>
    <h3>Try to scroll this area, and see how the sidenav sticks to the page</h3>
    <p>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.</p>
    <p>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).</p>
    <p>Some text..</p>
    <p>Some text..</p>

水平导航栏

 ul {
      padding: 0;
      margin: 0;
      list-style-type: none;
      overflow: auto;
      background-color: #f1f1f1;
      /*使导航栏固定到顶部*/
      position: fixed;
      top: 0;
      width: 100%;
    }

    ul li {
      float: left;
    }

    li a {
      display: block;
      text-decoration: none;
      padding: 16px;
      color: #000;
    }

    li a.active {
      background-color: #4CAF50;
      color: white;
    }

    a:hover:not(.active) {
      background-color: #555;
      color: black;
    }

(21)下拉菜单

.dropbtn {
      background-color: #4CAF50;
      color: white;
      padding: 16px;
      font-size: 16px;
      border: none;
      cursor: pointer;
    }

    .dropdown {
      position: relative;
      display: inline-block;
    }

    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0 8px 16px 0 rgba(161, 160, 160, 0.2);
    }

    .dropdown:hover .dropdown-content {
      display: block;
    }

    .dropdown-content a {
      text-decoration: none;
      color: black;
      padding: 12px 16px;
      display: block;
    }

    .dropdown-content a:hover {
      background-color: #f1f1f1;
    }

    .dropdown:hover .dropbtn {
      background-color: #3e8e41;
    }

 <h2>下拉菜单</h2>
 <p>鼠标移动到按钮上打开下拉菜单。</p>
  <div class="dropdown">
    <button class="dropbtn">下拉菜单</button>
    <div class="dropdown-content">
      <a href="//www.runoob.com">菜鸟教程 1</a>
      <a href="//www.runoob.com">菜鸟教程 2</a>
      <a href="//www.runoob.com">菜鸟教程 3</a>
    </div>
  </div>

(22)提示工具

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 50%;
    margin-left: -60px;
    
    /* 淡入 - 1秒内从 0% 到 100% 显示: */
    opacity: 0;
    transition: opacity 1s;
}
	.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

(23)图片廊

div.img {
    border: 1px solid #ccc;
}

div.img:hover {
    border: 1px solid #777;
}

div.img img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}

* {
    box-sizing: border-box;
}

.responsive {
    padding: 0 6px;
    float: left;
    width: 24.99999%;
}

@media only screen and (max-width: 700px){
    .responsive {
        width: 49.99999%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 500px){
    .responsive {
        width: 100%;
    }
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

<h2 style="text-align:center">响应式图片相册</h2>

<div class="responsive">
  <div class="img">
    <a target="_blank" href="img_fjords.jpg">
      <img src="//www.runoob.com/wp-content/uploads/2016/04/img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>


<div class="responsive">
  <div class="img">
    <a target="_blank" href="img_forest.jpg">
      <img src="//www.runoob.com/wp-content/uploads/2016/04/img_forest.jpg" alt="Forest" width="600" height="400">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>

<div class="responsive">
  <div class="img">
    <a target="_blank" href="img_lights.jpg">
      <img src="//www.runoob.com/wp-content/uploads/2016/04/img_lights.jpg" alt="Northern Lights" width="600" height="400">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>

<div class="responsive">
  <div class="img">
    <a target="_blank" href="img_mountains.jpg">
      <img src="//www.runoob.com/wp-content/uploads/2016/04/img_mountains.jpg" alt="Mountains" width="600" height="400">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>

<div class="clearfix"></div>

<div style="padding:6px;">
  
  <h4>重置浏览器大小查看效果</h4>
</div>

(24)图像透明/不透明

  • opacity:0-1 表示不透明度，数值越大，越不透明
opacity:0;
transition: opacity 1s ease /*设置过度效果*/

class:hover
{
opacity:1;  /*设置悬停时不透明*/
{

(25)图像拼合技术

就是加载一张图片，但是在不同的位置显示这张图片的不同部分。减少图片请求。

(26)媒体类型

@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;}
}

(27)属性选择器

  • [title=book]{color:blue;}

CSS 属性选择器 ~=, |=, ^=, $=, *= 的区别

"value 是完整单词" 类型的比较符号: ~=, |=
"拼接字符串" 类型的比较符号: *=, ^=, $=

1.attribute 属性中包含 value:　

[attribute~=value] 属性中包含独立的单词为 value，例如：
[title~=flower]  -->  <img src="/i/eg_tulip.jpg" title="tulip flower" />

[attribute*=value] 属性中做字符串拆分，只要能拆出来 value 这个词就行，例如：
[title*=flower]   -->  <img src="/i/eg_tulip.jpg" title="ffffflowerrrrrr" />

2.attribute 属性以 value 开头:

[attribute|=value] 属性中必须是完整且唯一的单词，或者以 - 分隔开：，例如：
[lang|=en]     -->  <p lang="en">  <p lang="en-us">[

attribute^=value] 属性的前几个字母是 value 就可以，例如：
[lang^=en]    -->  <p lang="ennn">

3.attribute 属性以 value 结尾:

[attribute$=value] 属性的后几个字母是 value 就可以，例如：
a[src$=".pdf"]

(28)表单

响应式表单
* {
  box-sizing: border-box;
}
 
input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}
 
label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}
 
input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
}
 
input[type=submit]:hover {
  background-color: #45a049;
}
 
.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}
 
.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}
 
.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}
 
/* 清除浮动 */
.row:after {
  content: "";
  display: table;
  clear: both;
}
 
/* 响应式布局 layout - 在屏幕宽度小于 600px 时， 设置为上下堆叠元素 */
@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}

<div class="container">
  <form action="/action_page.php">
  <div class="row">
    <div class="col-25">
      <label for="fname">First Name</label>
    </div>
    <div class="col-75">
      <input type="text" id="fname" name="firstname" placeholder="Your name..">
    </div>
  </div>
  <div class="row">
    <div class="col-25">
      <label for="lname">Last Name</label>
    </div>
    <div class="col-75">
      <input type="text" id="lname" name="lastname" placeholder="Your last name..">
    </div>
  </div>
  <div class="row">
    <div class="col-25">
      <label for="country">Country</label>
    </div>
    <div class="col-75">
      <select id="country" name="country">
        <option value="australia">Australia</option>
        <option value="canada">Canada</option>
        <option value="usa">USA</option>
      </select>
    </div>
  </div>
  <div class="row">
    <div class="col-25">
      <label for="subject">Subject</label>
    </div>
    <div class="col-75">
      <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
    </div>
  </div>
  <div class="row">
    <input type="submit" value="Submit">
  </div>
  </form>
</div>

(29)计数器

  • counter-reset:section;
  • counter-increment:section;
  • h2:before{content:"Section" counter(section) ":";}

(30)网页布局

  • 浮动float来设置多个列
avatar
文章
阅读
粉丝