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             width: 100px;
 8         }
 9     </style>
10 方式2
11     内敛样式:
12     <div style=" height: 200px;width: 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             width: 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             width: 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             width: 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

 

 

 

 

 

 

posted @ 2019-05-28 16:03  .如影随行  阅读(485)  评论(0)  编辑  收藏  举报