02.CSS基础2

CSS基础2

css父子选择器/派生选择器

父子选择器

有父子关系就行，爷爷对孙子的也行，间接的父子关系。

<div>
    <!--span里面需要有内容  样式才会生效-->
    <span>123</span>
</div>

<!--div span 是只对div标签包裹的span标签生效-->
div span {
	background-color:red;
}

<div>
    <strong>
        <em>234</em>
    </strong>
</div>

<!--这里把更外层的div写上也是可以的-->
div strong em {
	background-color:red;
}

<div class="wrapper">
    <strong class="box">
        <em>234</em>
    </strong>
</div>

<!--有类名 也可以用类名包裹  有父子关系就行-->
.wrapper .box em {
	background-color:red;
}

练习：
<div>
    <em>1</em>
    <strong>
        <em>2</em>
    </strong>
</div>

<!--两个em都会加上颜色 因为爷爷对孙子也行-->
div em {
	background-color:red;
}

<!--这样就只有第二个em变色-->
div strong em {
	background-color:red;
}

直接子元素选择器>

练习：
<div>
    <em>1</em>
    <strong>
        <em>2</em>
    </strong>
</div>

<!--div的直接下级是em的部分生效-->
div > em {
background-color:red;
}

section标签

标签结构图

具体用法

<section>
    <div>
        <p>
            <a href="">
                <span></span>
            </a>
        </p>
        <ul>
            <li>
                <a href="">
                    <span>
                        <em>11111111</em>
                    </span>
                </a>
                <p></p>
            </li>
            <li></li>
        </ul>
    </div>
    <a href="">
        <p>
            <em>222222222</em>
        </p>
        <div></div>
    </a>
</section>

<!--间接父子关系也会生效 所以1变色
这么长的标签 从右向左看比较快  
浏览器的遍历就是自右向左-->
section div ul li a em {
	background-color:red;
}

并列选择器

用多个限制条件选择一个元素，并且不加空格写到一起。

<div>1</div>
<div class="demo">2</div>
<p class="demo">3</p>

<!--并列选择器-->
div.demo {
	background-color:red;
}

练习

<!--练习 选择em的方法-->
<div class="wrapper">
    <div class="content">
        <em class="box" id="only"></em>
    </div>
</div>

<!--方法一-->
#only {
	background-color:red;
}

<!--方法二-->
box {
	background-color:red;
}

<!--方法二-->
.content em {
	background-color:red;
}

<!--方法三-->
.wrapper > .content > .box {
	background-color:red;
}

<!--方法四-->
div.wrapper > div[class="content"] > div#only.box {
	background-color:red;
}

<!--方法五-->
.box {
	background-color:red;
}

权重计算问题

权重的应用

<div class="classDiv" id="idDiv">
    <p class="classP" id="idP">
        1
    </p>
</div>

<!--100 1 所以这个组合标签的优先级更高-->
#idDiv p {
	background-color:red;
}
<!--10      10 -->
.classDiv .classP {
	background-color:green;
}

分组选择器

<em>1</em>
<strong>2</strong>
<span>3</span>

em, strong, span {
	background-color:red;
}

<div class="demo1"></div>
<div class="demo2"></div>

<!--简化下面代码-->
.demo1 {
	width:100px;
	height:100px;
	background-color:red;
}
.demo2 {
	width:100px;
	height:100px;
	background-color:green;
}

<!--简化之后 -->
.demo1,.demo2 {
	width:100px;
	height:100px;
}
.demo1 {
	background-color:red;
}
.demo2 {
	background-color:green;
}

css基础属性

font-size

font-size:16px调整字体大小

font-weight 字体粗细

font-weight:bold 加粗(默认属性值是nomal)

font-weigh属性值：

lighter<normal<bold<bolder<100 200 300 —— 900 (都是整百)

font-style 字体样式

font-style:italic(斜体) 字体样式

font-family 字体

font-family:arial字体 <字体很多 自己百度>

border 填充

border:3px solid black;
border可以设置不同边的颜色(transparent透明色)

div {
	border:3px solid black; 
    <!--第一位是border-width  第二位是border-style 第三位是border-color  所以等价于-->
    border-width:3-x;
    border-style:dotted;  <!--dashed是条状虚线(用得比较多)  doctted是点状虚线  solid是实线-->
    border-color:black;
	width:0px;
	height:0px;
	border:100px solid black;
	border-left:100px solid black; <!--单条边填充-->
	border-left-color:red;
	border-top-color:transparent;  <!--transparent-透明色->
	border-right-color:blue;
}

color 字体颜色

土鳖式(纯英文单词)

color:red;

颜色代码

color:#ff4400

颜色编码

color:rab(255,255,255,0.3)  <!--最后一位是透明度-->

<div>
    
</div>
<strong>生下来就是加粗</strong>

div {
<!--属性名+属性值 属性之间用分号分割-->
	font-size:12px;  <!--调整字体大小 浏览器默认字体是16px-->
	font-weight:bold; <!--加粗-->
	font-style:italic;
	font-family:arial;
	color:red;  <!--字体颜色-->
}

<div>
    这是一些内容！！！！！！！
</div>

/*css只有块注释 没有行注释*/
div {
	border:1px solid black;
	text-align:left; /*文本左对齐  center就是居中 right右对齐*/
    height:200px; /*让文本高度等于容器高度就是垂直居中*/
    line-height:200px; /*文本高度 文字的高度默认是16 如果文本高度是16 那上下就没有行间距*/
    text-indent:2em; /*首行缩进几个文本单位*/
    line-height:1.2em; /*行高 1.2倍行距*/
}

1em = 1 * font-size; = 16px;  /*1em就是一个文字的大小*/

text-decoration 文字描述

text-decoration属性值

text-decoration:line-through; 中间穿过的线(删除线)

text-decoration:none; 没线

text-decoration:underline; 下划线

curso 光标定位时鼠标变化

cursor:pointer; 鼠标移入时 鼠标箭头变成小手

cursor:help; 鼠标移入时 鼠标箭头变成问号

其他属性值现用现查

<del>原价50元</del>
<span>原价50元</span>

span {
    /*text-decoration:line-through; 中间划过的线*/
    color:rgb(0,0,238)
    text-decoration:underline; /*下划线*/
    cursor:pointer; /*光标移入时 pointer是变成小手手*/
}

del {
    text-decoration:none; /*去除删除标签的删除线*/
}

border-radius 圆角

伪类选择器

hover:鼠标移入时添加样式，鼠标移除时清除样式

伪类也是有权重的

<a href="www.baidu.com">www.baidu.com</a>
<a href="www.taobao.com">www.taobao.com</a>
<a href="www.jd.com">www.jd.com</a>

a {  /*原来没有下划线*/
    text-decoration:none;
}
a:hover { /*a的位置写什么选择器都行*/
    background-color:#f40;
    color:#fff;
    font-size:16px;
    font-weight:bold;
    font-family:arial;
    border-radius:10px;
    text-decoration:underline； /*鼠标移入时增加下划线*/
}

行元素/块元素

行级元素(内联元素 inline)

行级元素汇总(定义宽高对它无效)

span、strong em a del

特点

1. 内容决定元素所占位置
2. 不可以通过css改变宽高

可以通过修改display让行元素和块元素互相切换

<span>123</span>

/*默认有样式*/
span {
    display:inline
}

块级元素(block)

块级元素汇总

div p ul li ol form address

特点

1. 独占一行
2. 可以通过css改变宽高

可以通过修改display让行元素和块元素互相切换

<span>123</span>

/*默认有样式*/
span {
    display:block
}

行级块元素(inline-block)

img元素

图片后面可以加内容(行元素的属性)，有可以定义宽高(块元素的属性)

特点

1. 内容决定大小
2. 可以改宽高(一般只改宽或高，另一边会等比例缩放。)

可以通过修改display让行元素和块元素互相切换

<span>123</span>

/*默认有样式*/
span {
    display:inline-block
}

凡是带有inline的元素，都有文字特性

有文字特性就会被分割，文字中间有4px间隙

<!--运行之后照片中间会有间隙-->
<img src="照片.jpg">
<img src="照片.jpg">
<img src="照片.jpg">
<img src="照片.jpg">

<!--解决方案一是去除照片之间的空格(文字属性造成的间隔)-->
<img src="照片.jpg"><img src="照片.jpg"><img src="照片.jpg"><img src="照片.jpg">

img {
    width:100px;
    height:200px;
    margin-left:-6px; /*解决方案二是挪边距 但是这个不好 因为最后打包上传会压缩代码  系统会去空格去回车 那有margin-left照片之间就会重叠*/
}

编程手法

样式复用

问题：定义多个不同颜色和尺寸的盒子

先定义功能，后选配样式（先写css 再写html）

<div class="red size1"></div>
<div class="green size2"></div>
<div class="gray size3"></div>

.red {
    background-color:red;
}

.green {
    background-color:green;
}

.gray {
    background-color:gray;
}

.size1 {
    width:100px;
    height:100px;
}

.size2 {
    width:200px;
    height:200px;
}

.size3 {
    width:300px;
    height:300px;
}

初始化标签

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

ul {
    list-style:none;  /*去除默认的小圆圈*/
    padding：0px;
    ,argin:0px;  /*去除边距*/
}

通配符用法

/*基本上所有标签都自带margin 和 padding 可以通过通配符去除*/
* {
    margin:0px;
    padding:0px;
    text-decoration:none;
    list-style:none;
}