zoukankan      html  css  js  c++  java

  • CSS选择器

    昨日内容回顾

    HTML

    标签分类

    内敛标签:不独占一行,只能嵌套内敛标签

    块级标签:独占一行,能嵌套内敛标签和某些块级标签

    标签封闭

     <img >  自封闭
     <div></div> 全封闭

    head标签

    meta标签,title标签

    body标签

     h1-h6  b u s i p span div br hr img a form input button table ul li ol li select label
     textarea dl dt dd 
     特殊符号 &nbsp;空格...
     ​

    input

     type属性
     text password date radio checkbox file submit reset button hidden 
     ​
     name属性 分组,提交数据时的key,提交的数据value
     ​
     value属性 指定默认值
     ​
     默认选中  checked属性
     ​
     readonly 只读
     disabled 禁用
     ​

     

    table

     <table border="1" cellpadding="1" cellspacing="1">
             <thead>
                 <tr>
                     <th>姓名</th>
                     <th>年龄</th>
                     <th>爱好</th>
                 </tr>
             </thead>
             <tbody>
                 <tr>
                     <td>alexdsb</td>
                     <td>84</td>
                     <td>吹牛逼</td>
                 </tr>
             </tbody>
         </table>

    form表单

         <form action="地址">
             <input type="text" name="username">
     ​
             <input type="radio" name="sex" value="1">
             <input type="radio" name="sex" value="2">
             <input type="submit">
             <button>提交</button>
         </form>

    img

         <img src="图片地址" alt="图片未加载成功的提示信息" title="鼠标悬浮的提示信息" width="1" height="1">

    a

         <a href="超链接地址" target="_blank"></a>
         <a href="超链接地址" target="_self"></a>

    select下拉框

         <select name="city" multiple>
             <option value="1">上海</option>
             <option value="2" selected>深圳</option>
             <option value="2">惠州</option>
         </select>
     selected默认选中
     multiple 多选

    label标签

            <label for="username1">用户名</label>
        <input type="text" name="username1" id="username1">

        <label>
            <input type="text" name="username2" id="username2">
        </label>

    textarea 文本输入框

    <textarea name="" id="" cols="30" rows="10"></textarea>

     

    今日内容

    CSS选择器(Cascading Style Sheet，层叠样式表)

    css代码写法: h1{color:red;} 选择器{css属性:属性值;}

    css代码引入

     1 方式1
 2     head标签里面写
 3     <style>
 4         div{
 5             background-color: red;
 6             height: 100px;
 7              100px;
 8         }
 9     </style>
10 方式2
11     内敛样式:
12     <div style=" height: 200px; 200px;"></div>
13 方式3 
14     外部文件引入
15     head标签里面写link标签
16     <link rel="stylesheet" href="文件路径">

     

    css选择器

    基本选择器

     1 元素选择器:
 2     div{  #标签名字
 3          color:red;
 4     }
 5 id选择器:id值不能重复
 6     <div id="xuefei">
 7         雪飞大美女
 8     </div>
 9     
10     #xuefei{  
11         color:green;
12     }
13 类选择器: 类值可以重复
14     <div id="dazhuang" class="c1">
15         大壮dsb
16     </div>
17     <div id="xuefei" class="c1">
18         雪飞大美女
19     </div>
20     
21     .c1{
22         color: green;
23     }
24     
25     div.c1{ #div标签里面含有class值为c1的标签
26         color: green;
27     }
28 通用选择器
29 *{ #找到所有的标签
30     color: green;
31 }

     

    组合选择器

    后代选择器

    1 div a{   #找到div标签后代里面的所有a标签
2     color:red;
3 }

    儿子选择器

    1 div>a{ #找到div的儿子标签这一代的a标签
2     color:red;
3 }

    毗邻选择器

    1 div+a{  #找到是紧挨着div标签的下一个标签(是兄弟标签)
2      color: red;
3 }

    弟弟选择器

    1 div~a{  #找到的是同级的后面的所有兄弟标签
2     color: red;
3 }

     

    属性选择器

     1     #通过属性名来查找
 2     [title]{ #找到所有含有title属性的标签  
 3         color: red;
 4     }
 5     
 6     div[title]{  #含有title属性的div标签
 7         color: red;
 8     }
 9     #通过属性名对应的值来查找,当属性值的值为数字的时候,数字要加上引号[title='666']
10     input[type=text]{ #含有type属性,并且type属性的值为text的input标签
11         background-color: red;
12     }

    分组

    1 多个选择器选择的标签设置相同css样式的时候,就可以用分组
2 div,p{  #div选择器和p选择器共同设置相同的样式,可以逗号分隔
3     color:red;
4 }

    伪类选择器

     1 a标签自带的效果:未访问过的时候是蓝色的字体颜色,访问过之后是紫色的,自带下划线
 2 
 3 /* 未访问的链接 */
 4 a:link {
 5   color: #FF0000
 6 }
 7 
 8 /* 已访问的链接 */
 9 a:visited {
10   color: #00FF00
11 } 
12 
13 /* 鼠标移动到链接上 */  这个用的比较多,可以应用在其他标签上
14 a:hover {  
15   color: #FF00FF
16 } 
17 
18 /* 选定的链接 */ 就是鼠标点下去还没有抬起来的那个瞬间，可以让它变颜色
19 a:active {
20   color: #0000FF
21 }
22 
23 /*input输入框获取焦点时样式*/
24 input:focus {   #input默认的有个样式，鼠标点进去的时候，input框会变浅蓝色的那么个感觉
25   #outline: none;
26   background-color: #eee; #框里面的背景色
27 }

    伪元素选择器

     1          /*伪元素选择器*/
 2         div:first-letter{
 3             color: red;
 4             font-size: 20px;
 5         }
 6         /*在p标签内容的前面插入一些内容*/
 7         p:before{
 8             content: '?';
 9             color: green;
10             font-size:100px;
11         }
12         /*在p标签内容的后面插入一些内容*/
13         p:after{
14             content: '哈哈!';
15             color: pink;
16         }

     

    选择器的优先级

     1       /*优先级数字越大,越优先显示其效果,优先级相同的,显示后面定义的选择器对应的样式*/
 2         /*id选择器优先级为100*/
 3         /*#d1{*/
 4             /*color:deepskyblue;*/
 5         /*}*/
 6         /*!*继承的优先级为0*!*/
 7         /*body{*/
 8             /*color:red;*/
 9         /*}*/
10         /*!*类选择器的优先级是10*!*/
11         /*.c1{*/
12             /*color: blue;*/
13         /*}*/
14         /*.c2{*/
15             /*color: orange;*/
16         /*}*/
17         /*!*元素选择器优先级是1*!*/
18         /*div{*/
19             /*color: green;*/
20         /*}*/
21         内敛样式优先级为1000
22         <p class="cc3" style="color: red;">我是cc3的p标签</p>
23         
24         important优先级最高,最牛逼
25         .cc1 .cc3 {
26             color: purple!important;
27         }
28

    css属性相关

    高度宽度设置,注意:只有块级标签能够设置高度宽度,内敛标签不能设置高度宽度,它的高度宽度是由内容决定的

    1     div{
2              100px;  宽度
3             height: 100px; 高度
4             background-color: pink;
5         }

     

    补充:a标签的字体颜色设置必须选中a标签才行

    1 .c1 a{  
2     color: red;
3 }

     

    字体属性

    字体

    1 .c1{
2     font-family: '楷体','宋体','微软雅黑';
3 }

    字体大小

    1 .c1{
2             /*font-family: '楷体','宋体','微软雅黑';*/
3             font-size:14px; 默认字体大小为16px.
4             
5         }

    字体颜色

    1 color:red;

    子重,粗细

     1  .c1{
 2            
 3             font-weight: bold;
 4             font-weight: 100;
 5         }
 6         
 7 
 8 值    描述
 9 normal    默认值，标准粗细
10 bold    粗体
11 bolder    更粗
12 lighter    更细
13 100~900    设置具体粗细，400等同于normal，而700等同于bold

    颜色表示方式

    1         p{
2             /*color: red;*/
3             /*color: #78FFC9;*/
4             /*color: rgb(123,199,255);*/
5              color: rgba(123,199,255,0.3);  多了一个透明度的数字:0-1的一个数字
6         }

    文字属性

    文字对齐

     1     text-align
 2     
 3     div{
 4              200px;
 5             height: 200px;
 6             background-color: yellow;
 7             /*text-align: center;*/
 8             text-align: right;
 9         }
10         
11     left    左边对齐 默认值
12     right    右对齐
13     center    居中对齐

    文字装饰

     1     text-decoration
 2     
 3     div a{
 4             /*text-decoration: none;*/  #给a标签去除下划线
 5             /*text-decoration: line-through;*/
 6             text-decoration: overline;
 7         }
 8     值    描述
 9     none    默认。定义标准的文本。
10     underline    定义文本下的一条线。
11     overline    定义文本上的一条线。
12     line-through    定义穿过文本下的一条线。

    首行缩进

    1 p {
2   text-indent: 32px; #首行缩进两个字符，因为我记得一个字在页面上的默认大小为16px
3 }

     

    背景属性

     1 背景颜色
 2 background-color: red;
 3 
 4     div{
 5              600px;
 6             height: 600px;
 7             /*background-color: red;*/
 8             /*background-image: url("yeye.jpg");*/
 9             /*background-repeat: no-repeat;*/
10             /*background-position: 100px 50px;*/  相对于div标签的,距离左边100px,距离上面50px
11             background:url("yeye.jpg") no-repeat left center;
12             /*background-position: right top;*/
13 
14         }
15 简写方式,颜色  图片路径 是否平铺 图片位置
16 background:#ffffff url('1.png') no-repeat right top;
17

     

     

     

     
  • 相关阅读:
    OS快速开发必备
    YYmodel 郭耀源 底层分析
    UITableView使用总结和性能优化
    文件操作
    DOM解析
    SAX解析
    Gallery
    菜单（menu）
    计时器（Chronometer）、标签(TabHost)
    ListActivity
  • 原文地址：https://www.cnblogs.com/zhangxiangning/p/11195498.html
Copyright © 2011-2022 走看看