css 控制常见的样式

字体:

字体样式： font-style font-weight font-size line-height font-family

font-family: '静蕾体','微软雅黑','文泉驿正黑体','黑体',sans-serif;

|-.-.- sans-serif 无衬线 // serif有衬线

背景:

background-color:yellow;

background-image: url(http://http://www.wsm.cn/uploads/allimg/170318/26-1F31P95330-50.jpg) ;

background-repeat:no-repeat;

background-attachment: fixed;

background-position: 10px 10px; 可以用做大图定位小图节约请求频率

h5 几个基础语义化标签

header footer nav[导航] article aside[侧边栏] time

img 内联替换元素

seo 相关 title= alt=

可以设置宽高，不能用padding margin 直接去掉缝隙

去掉图片之间的缝隙
转块状 -> 设置 margin,padding为0 -> float

用id 作为锚点

index.html#m1

字符实体   ⁢ >

nav 常见的导航条手写

nav ul 1100px * 60px; 居中显示
nav ul li float: left;
nav a { padding:0 20px;}
nav a:hover {background:3F3F3F} 鼠标放上去,问题显示
nav a display:block;

实现行内文字居中:
text-align: center;
line-height: 80px;

css3 基本选择器

层级选择器
属性选择器
伪类选择器

1.关系选择器(层次选择器):
后代元素 E F 匹配作为所有作为 E元素后代的 F元素
子级元素 par>son 匹配 par 元素的子级 son 元素只对子集做匹配！
相邻元素 E+F 匹配紧贴着 E 元素的 F 元素
兄弟元素 E~F 匹配 E 后面所有同级别 F 元素

e f

e > f

e + f

e ~ f

<head>
    <meta charset="utf-8">

<style type="text/css">
    
  div ul li{ font-size:30px;  }

  div ul { border:2px solid green; }

  div > ul{
      border: 2px dashed grey;
  }

  div + p {
      border: 7px dotted yellow;
  }

  div ~ p {
      background-color:  pink;
  }

</style>




</head>

<div>
    <ul>
    <li>后宫</li>
    <li>
    <ul>
    <li>貂蝉</li>
    <li>西施</li>
    <li>杨贵妃</li>
    <li>王昭君</li>
    </ul>
    </li>
    </ul>
</div>
<p>p1妲己</p>
<span><p>span下的p</p></span>
<p>柳飞燕</p>

---

2.属性选择器(用在表单里比较多)
E[属性名] 含有某属性的元素
E[属性名=值] 某属性=某值的元素

---

<head>
    <meta charset="utf-8">
    <style type="text/css">        
         input[name] {
                 border: 3px solid green;
         }

         input[name = email]:focus  {
             background-color: red;
         }

         input[name = username]:hover {
             background: blue;
         }
    </style>
</head>

<form action="">
<input type="text" name="username">
<input type="text" name="email">
</form>

---

3.伪类选择器
E:first-child 匹配作为第 1 个子元素的元素 E
E:last-child 匹配作为最后一个子元素的元素 E
E:nth-child(N) 匹配作为第 N 个子元素的元素 E 匹配E的父元素的第n个元素(但是n不一定还能匹配到他)

例如： p:nth-child(1) -- 没有元素被选中 p:nth-child(2) 选中第一个 p　　　　　　

<body>

<p>这是第一个段落。</p>
<p>这是第二个段落。</p>
<p>这是第三个段落。</p>
<p>这是第四个段落。</p>
<div>123</div>
</body>

---

<head>
    <meta charset="utf-8">
    <style type="text/css">        
    
        li:first-child {
            background: yellow;
        }

        li:last-child{
            background: pink;
        }

        li:nth-child(3){
            background: red;
        }

        li:nth-child(2){
            background: blue;
        }

        li:nth-child(1){
            background: purple;
        }

    </style>
</head>

<ul>
    <li>张三</li>
    <li>李四</li>
    <li>王五</li>
    <li>赵六</li>
</ul>

---

4.伪对象选择器
人为的伪造出来的对象,本身没有这个对象
E::before 设置 E 元素前面的内容
E::after 设置 E 元素后面的内容

---

<head>
    <meta charset="utf-8">
    <style type="text/css">        
    
    p:first-child::before { content:"第一段落:";  }
    p:nth-child(3)::after { content: "这是最后一段结束。"; }

    </style>
</head>

<p>我是第一段</p>
<p>我是第二段</p>
<p>我是第三段</p>



//用伪对象选择器实现清除浮动

#main::after {
　　content: '';
　　display: block;
　　width: 0px;
　　height: 0px;
　　clear: both;
}

min-height:400px;[min-width]
刚开始可以给父元素一个最小高,内容再少,也是400px,内容多会自动撑开父元素

选择器 p:last-of-type {}

<!DOCTYPE html>
<html>
<head>
    <style> 
        p:nth-child(2)
        {
            background:pink;
        }

        p:last-child
        {
            background:blue;
            border:1px solid green;
        }

        p:last-of-type {
            background: yellow;
        }
    </style>
</head>

<body>

<h1>这是标题</h1>

<p>这是第一个段落。</p>
<p>这是第二个段落。</p>
<p>这是第三个段落。</p>
<p>这是第四个段落。</p>
<div>123</div>
</body>
</html>

posted @ 2017-04-08 15:56 silvercell 阅读(1420) 评论(1) 收藏举报

刷新页面返回顶部

FrontWay 前路

前路与后路。

css 控制常见的样式