css知识点1小总结

注意:建议有css基础

1.引入CSS样式

1.行内式
  • 其基本语法格式如下:
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
  • 案例:
<div style="color: red; font-size: 12px;">青春不常在,抓紧谈恋爱</div>
  • 注意:
- style其实就是标签的属性
- 样式属性和值中间是`:`
- 多组属性值之间用`;`隔开。
- 只能控制当前的标签和以及嵌套在其中的字标签,造成代码冗余
  • 缺点:
没有实现样式和结构相分离
2 内部样式(内嵌样式)
  • 其基本语法格式如下:
<head>
<style type="text/CSS">
    选择器(选择的标签) { 
      属性1: 属性值1;
      属性2: 属性值2; 
      属性3: 属性值3;
    }
</style>
</head>
<style>
	 div {
	 	color: red;
	 	font-size: 12px;
	 }
</style>
  • 注意:
style标签一般位于head标签中,当然理论上他可以放在HTML文档的任何地方。
type="text/css"  在html5中可以省略。
只能控制当前的页面
  • 缺点:
没有彻底分离
3.外部样式(外链式)
  • 其基本语法格式如下:
<head>
  <link rel="stylesheet" type="text/css" href="css文件路径">
</head>
4 导入式
  • 其基本语法格式如下:
@import url("css文件路径");

比前两中好,但一般就用第三种,因为这一种你可能都是第一次见

5 三种样式总结
样式表优点缺点使用情况控制范围
行内样式表书写方便,权重高没有实现样式和结构相分离较少控制一个标签(少)
内部样式表部分结构和样式相分离没有彻底分离较多控制一个页面(中)
外部样式表完全实现结构和样式相分离需要引入最多,强烈推荐控制整个站点(多)

css 基础选择器

1.标签选择器
  • 语法:
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 
  • 作用:
标签选择器 可以把某一类标签**全部**选择出来  比如所有的div标签  和 所有的 span标签
  • 优点:
是能快速为页面中同类型的标签统一样式
  • 缺点:
不能设计差异化样式。 
2 类选择器
  • 语法:
<style>
.类名  {   
    属性1:属性值1; 
    属性2:属性值2; 
    属性3:属性值3;     
}
</style>

<p class='类名'></p>

  • 优点:
可以为元素对象定义单独或相同的样式。 可以选择一个或者多个标签 
  • 注意
- 类选择器使用“.”(英文点号)进行标识,后面紧跟类名(自定义,我们自己命名的)
- 长名称或词组可以使用中横线来为选择器命名。
- 不要纯数字、中文等命名, 尽量使用英文字母来表示。
  • 给标签指定多个类名,从而达到更多的选择目的。
    各个类名中间用空格隔开。
    多类名选择器在后期布局比较复杂的情况下,还是较多使用的。
<div class="pink fontWeight font20">蒙多</div>
<div class="font20">压缩</div>
<div class="font14 pink">复仇之矛</div>
<div class="font14">圣枪游侠·奥巴马</div>
3 id选择器
  • 语法格式如下:
#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

<p id="id名"></p>
  • 元素的id值是唯一的,只能对应于文档中某一个具体的元素
  • 用法基本和类选择器相同。
  • W3C标准规定,在同一个页面内,不允许有相同名字的id对象出现,但是允许相同名字的class。
    • 类选择器(class) 好比人的名字, 是可以多次重复使用的, 比如 张伟 王伟 李伟 李娜
    • id选择器 好比人的身份证号码, 全中国是唯一的, 不得重复。 只能使用一次。

id选择器和类选择器最大的不同在于 使用次数上。

  • 类选择器我们在修改样式中,用的最多。
  • id选择器一般用于页面唯一性的元素身上,经常和我们后面学习的javascript 搭配使用。

4. 通配符选择器

语法格式如下:
* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

例如下面的代码,使用通配符选择器定义CSS样式,清除所有HTML标记的默认边距。

* {
  margin: 0;                    /* 定义外边距*/
  padding: 0;                   /* 定义内边距*/
}

注意:常用类选择器, 少用其他三种

一,常用样式-字体样式

font-size:大小

font-family:字体

列子:

p{ font-family:"微软雅黑";}

font-weight:字体粗细

代替了html中的b 和 strong 标签

属性值描述
normal默认值(不加粗的)
bold定义粗体(加粗的)
100~900400 等同于 normal,而 700 等同于 bold 我们重点记住这句话

font-style:字体风格

代替了 i 和 em 标签 没说禁止(上下同)

属性作用
normal默认值,浏览器会显示标准的字体样式 font-style: normal;
italic浏览器会显示斜体的字体样式。

简写:

选择器 { font: font-style  font-weight  font-size/line-height  font-family;}

二,常用样式-外观样式

1 color:文本颜色

  • 作用:

    color属性用于定义文本的颜色,

  • 其取值方式有如下3种:

表示表示属性值
预定义的颜色值red,green,blue,还有我们的御用色 pink
十六进制#FF0000,#FF6600,#29D794
RGB代码rgb(255,0,0)或rgb(100%,0%,0%)
  • 注意

    我们实际工作中, 用 16进制的写法是最多的,而且我们更喜欢简写方式比如 #f00 代表红色

2.text-align:文本水平对齐方式

  • 作用:

    text-align属性用于设置文本内容的水平对齐,相当于html中的align对齐属性

  • 其可用属性值如下:

属性解释
left左对齐(默认值)
right右对齐
center居中对齐
  • 注意:

    是让盒子里面的内容水平居中, 而不是让盒子居中对齐

尺寸单位

​ 单位为px

​ width : 宽高

​ height: 高度

3 line-height:行间距

  • 作用:

    line-height属性用于设置行间距,就是行与行之间的距离,即字符的垂直间距,一般称为行高。

  • 单位:

    • line-height常用的属性值单位有三种,分别为像素px,相对值rem,em和百分比%,vh,vw,实际工作中使用最多的是像素px
  • 技巧:

一般情况下,行距比字号大7.8像素左右就可以了。
line-height: 24px;

4 text-indent:首行缩进

  • 作用:

    text-indent属性用于设置首行文本的缩进,

  • 属性值

    • 其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%,允许使用负值,
    • 建议使用em作为设置单位。

1em 就是一个字的宽度 如果是汉字的段落, 1em 就是一个汉字的宽度

p {
      /*行间距*/
      line-height: 25px;
      /*首行缩进2个字  em  1个em 就是1个字的大小*/
      text-indent: 2em;  
 }

5 text-decoration 文本的装饰

text-decoration 通常我们用于给链接修改装饰效果

描述
none默认。定义标准的文本。 取消下划线(最常用)
underline定义文本下的一条线。下划线 也是我们链接自带的(常用)
overline定义文本上的一条线。(不用)
line-through定义穿过文本下的一条线。(不常用)

CSS 三大特性

1 层叠性

所谓层叠性是指多种CSS样式的叠加。

样式冲突,遵循的原则是就近原则。 那个样式离着结构近,就执行那个样式。
样式不冲突,不会层叠

2 继承性
  • 概念:

    子标签会继承父标签的某些样式,如文本颜色和字号。

    想要设置一个可继承的属性,只需将它应用于父元素即可。

简单的理解就是: 子承父业。

  • 注意
    • 恰当地使用继承可以简化代码,降低CSS样式的复杂性。比如有很多子级孩子都需要某个样式,可以给父级指定一个,这些孩子继承过来就好了。
    • 子元素可以继承父元素的样式(text-,font-,line-这些元素开头的可以继承,以及color属性
3 CSS优先级

继承权重为 0 < 标签为 1 < class 10 < id 100<行内 1000 < !important 无穷大

复杂选择器

  1. 后代选择器 空格
  2. 子代选择器 大于号
  3. 兄弟选择器 加号
  4. 群组选择器 逗号
  5. 伪类选择器 hover 当鼠标移入标签时的样式
    a 标签的链接样式:
    :link
    :hover
    :active
    :visited
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 后代选择器 */
        /* .father div{
            width: 100px;
            height: 100px;
            background-color: red;
        } */
        /* 子代选择器 */
        /* .father>div{
            width: 100px;
            height: 100px;
            background-color: red;
        } */
        /* 权重30 */
        .father .son .target{
            
            background-color: red;
        }
        /* 300  */
        #fat #son #tar{
            
            background-color: yellow;
        }
        /* 120 */
        #fat>.son>.target{
            
            background-color: green;
        }
        /* 120 */
        .father #son>.target{
            
            background-color: pink;
        }
        /* 3 */
        div>div>span{
            
            background-color: aqua;
        }
        
         /* 继承or*  0 < 标签 1 < class 10 < id 100 < 行内 1000 < !important 无穷大 */
         
        /* 11 */
        div>div>div>div>div>div>div>div>div>div>div{ 
           
            background-color: yellow;
        }
         /* 10 */
         .shazi{
            
            background-color: red;
        } 
    </style>
</head>
<body>
    
    <div class="father" id="fat">
        <div class="son" id="son">
            <span class="target" id="tar">span</span>
        </div>
    </div>


    <div>
        <div>
            <div>
                <div>
                    <div>
                        <div>
                            <div>
                                <div>
                                    <div>
                                        <div>
                                            <div class="shazi">谁再问就是傻子</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

结果:
在这里插入图片描述

1. 盒子模型

概念:把每个标签当成一个纸盒看待,每个标签就会存在边框,内容,内边距,外边距

特点:
盒子模型是由内容(width,height),边框,内边距,外边距组成
盒子本身的文字和图片等元素就是内容区域
盒子的厚度就是边框
盒子内容于边框的距离就是内边距
盒子与盒子之间的距离就是外边距

1.1 边框样式 border

border-width 定义边框粗细,单位px
border-style 定义边框样式
    可选值:none 默认值,没有边框
           solid 单实线 常用
           dashed 虚线
           dotted 点线
border-color 定义边框颜色 默认为黑色
border-radius 边框圆角

边框的简写

border : border-width border-style border-color

1.2 内边距 padding

盒子的边框到内容的距离就是内边距
padding-left
padding-right
padding-top
padding-bottom
单位都是数值设定距离

1.内边距会使盒子变大
内边距的简写

padding : 1个值   上下左右
          2个值   上下  左右
          3个值   上  左右  下
          4个值   上  右  下  左

1.3 外边距 margin

盒子的边框到内容的距离就是内边距
margin-left
margin-right
margin-top
margin-bottom
单位都是数值设定距离
外边距的简写

margin : 1个值   上下左右
          2个值   上下  左右
          3个值   上  左右  下
          4个值   上  右  下  左

1.4盒子模型的常见问题和解决方案

  1. 块级级盒子水平居中问题
    必须满足的条件指定了宽度,将这个盒子左右margin设置为auto

  2. 文字居中和盒子居中
    行内元素,行内块元素,文本在水平方向居中对齐text-align:center
    跨级元素在水平方向居中对齐margin:auto

  3. 清除元素的默认内外边距(重要)
    自带内外边距的标签:ul li ol dl dt dd p body
    为了更灵活方便的控制网页的标签

    *{
        margin:0;
        padding:0;
    }

注意:行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下内外边距

  1. 边距塌陷(外边距重合问题)
    使用margin定义块元素的垂直外边距,可能会出现边距塌陷问题
    ①相邻块元素垂直外边距合并
    当上下的两个块元素相遇时,如果上面的元素设置了margin-bottom
    下面的元素有上外边距margin-top,则他们之间的垂直外边距不是margin-bottom+margin-top之和
    取两值中的较大值作为中间的外边距,这种现象被称为边距塌陷
    解决方案:尽量只给一个盒子设置margin
    ②嵌套块元素垂直外边距合并
    对于两个嵌套关系的块元素,如果父元素没有上内边距和边框
    父元素上外边距会和子元素上外边距发送合并,合并后的外边距时两者中较大值
    **
    解决方案:1.给父元素边框
    2.给父元素内边距
    3.给父元素overflow:hidden;
    **

1.5 盒子模型的稳定性

优先使用 宽度width > 内边距padding > 外边距margin

  1. margin会有外边距合并问题,ie6下面的margin会有一个边距加倍的bug

w3c标准盒子模型中的宽高度计算:
宽度 = width + 左右border-width + 左右padding
高度 = height + 上下border-width + 上下padding

ie盒子模型(怪异盒模型)

1. 标签分类

  1. 行内标签

    特点:和其他行内标签在同行显示,不支持宽高(css样式)

    比如:a,b,s,u,i,font,sub,sup,span

  2. 块级标签

    特点:独占一行,支持宽高(css样式)

    比如:h1~h6,p,hr,div,li,ul,ol,dl,dd,dt

  3. 行内块标签

    特点:同行显示,支持宽高

    比如:img

  • 11
    点赞
  • 27
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值