CSS相关知识

1. 什么是css?

        层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言;通俗来讲:就是用于美化HTML标签,相当于对页面进行化妆。

2. 标签选择器

     标签选择器,根据指定的标签名称,找到当前界面所有的该名称的标签,然后设置属性

        标签 { 属性:值;}

        特点:标签选择器定义之后会经页面所有的元素都执行这个标签样式;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="keyword" content="标签选择器">
    <meta name="description" content="标签选择器">
    <link rel="stylesheet" type="text/css" href="#">
    <title>标签选择器</title>
    <style>
        h1 {
            color: red;     
        }
    </style>
</head>
<body>
    <h1>标签选择器</h1>
</body>
</html>

3. 类选择器 class  点击打开链接

       语法格式: .自定义的类名 {属性:属性值 ;}    类选择符号用" . "表示

       特点: 谁调用,谁生效;

                  一个标签可以调用多个类选择器; (一个标签可以定义多个类名)

                  多个标签可调用同一个类选择器;(如果类名相同的情况下,其他标签可以同时使用)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10-css类选择器.html</title>
    <!--
        类选择器,根据指定class找到对应的标签,然后设置属性
        1,格式:
        .类名{
                属性:值;
            }
        2,注意点 命名规范:
        (1),class命名,不能以数字开头
        (2),class命名格式包括字母、数字、下划线
        (3),不能是标签的名称
        (4),在编写id选择器时,一定要在class前面加上.
        (5),在同一界面中class命名可以重复
        (6),class是专门给某个特定的标签设置样式的
        (7),在html中每个标签可以同时绑定多个class,但是id是唯一的
        格式:<标签名称 class="类名1 类名2 ...> </标签名称>"
    -->
    <style>
        .p1{
            color: red;
        }
        .p2{
            color: burlywood;
        }
        .p3{
            color: greenyellow;
        }
        .p4{
            color: cyan;
        }
        .para1{
            color: green;
        }
        .para2{
            font-size:50px;
        }
    </style>
</head>
<body>
<h1>成功法则</h1>
<p class="p1">迟到毁一生</p>
<p class="p2">早退穷三代</p>
<p class="p3">按时上下班</p>
<p class="p4">终成高富帅</p>
<br>
<p class="para1 para2">我是段落</p> /*一个标签可以调用多个类选择器(一般最多调用2个)*/
</body>
</html>

4. ID选择器 id

      id 选择器是根据标签中的id属性值进行选取来设置样式 ,用“ # ”表示。

      语法格式: #自定义名称 { 属性:属性值;}

      特点: 一个ID选择器在一个页面只能出现一次。如果使用两次或两次以上,不符合w3c规范,JS调用会出问题。

                 一个标签只能调用一个ID选择器 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ID类选择器.html</title>
    <!--
        id选择器,根据指定id找到对应的标签,然后设置属性
        1,格式:
        #id的属性名 {
            属性名称:属性值;
        }
        2,ID选择器命名规范:
        (1),id命名,不能以数字开头
        (2),id命名格式包括字母、数字、下划线
        (3),不能是标签的名称
        (4),在编写id选择器时,一定要在id前面加上#
        (5),在同一界面中id命名不能重复
        (6),仅仅是为了设置样式,一般不会用id,因为id是留给js开发用的
    -->

    <style>
        #id1{
            color: red;
        }
        #id2{
            color: lightcoral;
        }
        #id3{
            color: greenyellow;
        }
        #id4{
            color: purple;
        }
    </style>
</head>
<body>
    <h1>成功法则</h1>
    <p id="id1">迟到毁一生</p>
    <p id="id2">早退穷三代</p>
    <p id="id3">按时上下班</p>
    <p id="id4">终成高富帅</p>
</body>
</html>

5. 通配符选择器 *(不推荐使用)

          语法格式: * {属性:属性值;}

          特点: 给当前页面所有的标签设置相同的样式;    (不推荐使用会增加浏览器的解析和服务器的负担)

<DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>通配符选择器*</title>
    <style type="text/css">
        * {
            color: red;
            font-size: 300px;
            background-color: yellow;
        }
    </style> 
</head>
<body>
    <h1>好好学习,天天向上</h1>
    <p>好好学习,天天向上</p>
    <div>我要成功</div>
    <span>你一定可以的</span> 
</body>
</html>

6. 交集选择器友情链接

          语法格式:标签+类class / ID选择器 { 属性:属性值;}

        既满足于使用了某个标签,又满足了使用类class或id选择器称之为 “交集选择器”。

           第1个必须是标记选择器,第2个必须是class选择器或ID选择器   (既 、又关系);

            两个选择器之间不能有空格,必须连续书写

          

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>交集选择器</title>
	<style type="text/css">
		.content {
			font-size: 50px;
		}
		div.content {  /*交集选择器*/
			/*问题:如果我想把div标签中的字体颜色改为红色,但p标签中的字体颜色不变该怎么写?*/
			color: red;
		}
	</style>
</head>
<body>
	<div class="content">越努力,越幸运!</div>
	<p class="content">爱笑的人运气都不会太差!</p>
</body>
</html>

7. 后代选择器 ★★友情链接   友情链接

         语法格式: 元素1+空格+元素2 { 属性:属性值;}    (中间用空格相连

         后代选择器基本要求要满足是 包含(嵌套)关系;

         特点: 后代选择器 无限制隔代;

                        后代选择器不需要相匹配元素之间要有严格的父子关系.父在前子在后

                    元素之间自由组合; 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>后代选择器</title>
	<style>
		.tab li span{
			color: red;
		}
		/*.tab span {  这样写也是可以的,相匹配元素之间不需要有严格的父子关系
			color: red;
		}*/
		h2 {
			color: yellow;
			background-color: green;
			font-size: 30px;
		}
	</style>
</head>
<body>
	<h1 style="color: red; font-size: 35px;">知识点:</h1>
	<h2>所谓“后代选择器”:又称“包含选择器”,顾名思义就是选择某元素或某元素组后面的后代</h2>
	<strong>范例:</strong>
	<div class="tab">
		<ul>
			<li>青春就是这样,好得像是无怎样度过都会被浪费。</li>
			<li> 世界上唯一不变的就是变化,世界上唯一可能的就是不可能。</li>
			<li>你总是说青春从不曾永远,而那时候的我们,就是最好的我们。</li>
			<li><span> 最容易令人感到温暖和惊喜的是陌生人,因为你对他没有期望。</span></li>
			<li>最容易令人感到心寒和悲哀的是亲人,因为你爱他们。</li>
		</ul>
	</div>
</body>
</html>

8. 子元素选择器 

        语法格式:元素 > 元素 {属性:属性值;}      中间用符号“ > ”

               特点与后代选择器相比,子元素选择器(Child selectors)只能选择作为某元素子元素的元素;

                      选中直接下一代元素

9. 并集选择器

       语法格式:选择器1,选择器2,....{ 属性:属性值;}      选择器之间用“ , ”隔开

       并集选择器是各个选择器通过逗号连接而成的任何形式的选择器(包括标记选择器、class类选择器、id选择         器等),都可以作为并集选择器的一部分;如果某些选择器定义的样式完全相同或部分相同就可以利用并集           选择器为他们定义相同的css样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>16-css并集选择器.html</title>
    <!--
        并集选择器
        1,格式:
        选择器1,选择器2,...{
                属性:值;
           }
        2,注意点:
        (1),选择器之间利用,连接
        (2),选择器可以是标签名称,也可以是id、class名称
    -->
    <style>
        .ht,.para{
            color: red;
        }
    </style>
</head>
<body>

<h1 class="ht">我是头</h1>
<p class="para">我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
</body>
</html>

9. 字体类型 font-family

   

10. 文本属性 font

    字体样式风格:font-style : normal正常 / oblique倾斜 / italic斜体;

    字体粗细:font-weight:700(粗)  400(正常 细);  可以用数字100-900(整倍数)定义字体粗细

    字体大小:font-size: 50px ;

    字体类型:font-family:"微软雅黑"

    font属性合写: font : normal  700  35px  "微软雅黑"; (中间用空格隔开如果字体样式风格是正常的话可忽略不写

11. 样式表写法 

    1. 内嵌式写法: 直接写在head标签中;

                  特点:样式只实现于当前页面,没有真正实现结构表现分离;

1  <head>
2      <style type=”text/css”>
3            样式表写法
4      </style>
5  </head>

   2. 外链式写法: 也是写在head标签中;

                 样式: <link rel="stylesheet" href="文件路径">  重点

                 特点: 谁调用谁生效,范围广,真正实现结构表现分离;

   3. 行内样式写法: 直接写在标签中;

<p style="color:red; font-size:35px;">我一定会成功</p>

                  特点:作用仅限于当前标签,范围小,结构表现混在一起(不推荐使用);

12. 块元素 

      典型代表:div、p、h1-h6、ul、li  ......

      特点:    ① 独占一行; ② 可以设置宽高;

                    ③ 在嵌套(包含)关系下,子块元素宽度在没有定义的情况下和父块元素宽度默认保持一致;

13. 行内元素

     典型代表: span、a、strong、em、del ......

     特点:       ① 在一行上显示(不独占行);

                      ② 不能直接摄者宽高(元素的宽高就是内容撑开的宽高,由其内容决定) ;

14 . 行内块元素(内联元素)友情链接

      典型代表: img、  input

      特点:       ① 在一行上显示; ② 可以自定义宽高; 

15. display

      1.  如何将行内元素转换为块元素?

            display : block;

      2. 如何将块元素转换为行内元素?

            display:inline;

      3. 如何将块、行内元素转换为行内块元素?

            display : inline-block;

16. css三大样式之层叠性

            当多个样式作用于同一个(同一类)标签上时,总是执行后面的代码(后面代码层叠前面的代码、浏览器的解析顺序是                从上而下)。

17. css三大样式之继承性 友情链接

            继承性发生的前提是嵌套(包含)关系,即子元素可以继承父元素的属性;

            文字的所有属性颜色、字体、大小、风格、粗细、行高都可以继承;

            特殊情况: h 系列标签文字的大小不能继承;

                              a 标签字体颜色不能被继承;

18. css三大样式之优先级 友情链接

            优先级是指:不同类别样式之间的权重比较;

            浏览器默认样式 < 标签选择器 < class类选择器 < id选择器 < 行内样式 < !important

                       0                     1                      10                100           1000            1000以上

            100个标签选择器也比不过 1 个class类选择器。

            同一级别中后写的样式会覆盖掉先写的样式。

19. 优先级的特点   友情链接 zhw9

       1. 继承的权重为 0 .

       2. 权重会叠加 .

     CSS 优先级法则:

          A  选择器都有一个权值,权值越大越优先;

          B  当权值相等时,后出现的样式表设置要优于先出现的样式表设置;

          C  创作者的规则高于浏览者:即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式;

          D  继承的CSS 样式不如后来指定的CSS 样式;

          E  在同一组属性设置中标有!important”规则的优先级最大;

20.  链接伪类 

       1.    a:link {属性:值;}      设置 链接a标签的 默认样式,有的浏览器不兼容所以建议直接使用 a 标签;

      2.    a:visited {属性: 值;}   设置 链接a标签访问之后的状态;(一般不用)

      3.    a:hover {属性:值;}   设置 当鼠标经过或放到链接a标签上时的显示状态;(常用

      4.    a:active {属性:值;}   设置 当链接a标签被激活(鼠标点击和释放之间发生得事件)显示的状态;(常用

         严格遵循书写顺序: ①link   ② visited   ③ hover   ④ active

--------------------------------------------------------------------------------------------------------------------

      5.    a:focus{属性:值;}     设置 当元素获取焦点时为其设置特殊样式;

      文本修饰线: text-decoration 

            text-decoration: none;   没有任何装饰,正常文本默认值;

           text-decoration: underline;  下划线;

           text-decoration: line-through;  删除线;

21.  background 背景友情链接

background详细属性(友情链接)详细
属性属性作用
background-color颜色完全填充背景的颜色
background-imageurl ( 图片位置)用作背景的图片
background-positionleft(左)、right(右)、center(中间)、top(顶部)、bottom(底部)确定背景图片的位置
background-repeatrepeat(平铺默认)、no-repeat(不平铺)、repeat-x(x轴方向平铺)、repeat-y(y轴方向平铺)确定背景图片是否重复平铺
background-attachmentfixed (固定不滚动)、scroll (滚动)确定背景图片是否随页面滚动

-------------------------------------------------------------------------------------------------------------------------------

      ★★ background 背景属性连写:url 为必写项

      

22. 行高 line-height

  

      行高:基线与基线之间的距离称之为行高;

      行高:文字高度+上下边距=基线与基线之间的距离;

      ☆☆☆  当一行文字行高和父元素高度一致的情况下,实现垂直居中显示;

     行高的单位:px、em、%、2(单纯数字);

            

23. 盒模型

   

        content :  内容;

       border :  边框;

       padding :内边距:内容到边框之间的距离称之为内边距;

       margin : 外边距:边框以外的称之为外边距;

24. 盒模型 之 “边框 border” 友情链接  友情链接

        border : 即边框,有三个属性;

        border-style : 边框的线型  solid 实线、dashed 虚线、dotted 点线

        border-width :边框的粗细(宽);

        border-color :边框的颜色;

       △ border可以分边定义样式:

               如: border-top-style:solid;

                       border-top-width:3px;

                       border-top-color: red;

           ☆分边的属性连写为: border-top:solid  3px  red;(合写没有顺序要求,但线型为必写项)

           ☆☆☆ 如果四个边框的属性值相同:

                    border:solid  3px   red;

25.盒模型之 内边距 padding

       内容(content)距边框(border)之间的距离称之为“内边距”;

        padding-top:上内边距;            padding-right:右内边距;

        padding-bottom:下内边距;     padding-left:左内边距;

padding连写
 连写样式意义 
padding:30px;上右下左内边就有都为30px
padding:30px  20px;上下内边距为30px,左右为20px
padding:30px  20px  15px;上内边距为30px,右左内边距为20px,下内边距为15px
padding:30px  20px  15px  35px;上内边距为20px,右内边距20px,下内边距为15px,左内边距为35px

         影响盒子宽度的因素有:① 内边距影响盒子的宽度;   ② 边框的宽度影响盒子的宽度;

         盒子的宽度= 定义的宽度+左右内边距(padding)的宽度+左右边框(border)的宽度

        继承的盒子水平方向一般不会撑大:

               包含(嵌套)的盒子,如果子盒子没有定义宽度,给子盒子设置左右内边距,一般不会撑大盒子。

26.盒模型之 外边距 margin

      边框以外的都为外边距;

margin连写
 连写样式意义 
margin:30px;上右下左外边就有都为30px
margin:30px  20px;上下外边距为30px,左右为20px
margin:30px  20px  15px;上外边距为30px,右左外边距为20px,下外边距为15px
margin:30px  20px  15px  35px;上外边距为20px,右外边距20px,下外边距为15px,左外边距为35px

   垂直方向外边距合并

      ☆ 垂直方向的两个盒子,如果一个设置下外边距,一个设置上外边距,那么取的是 设置较大的值。

   嵌套的盒子外边距塌陷

       解决方法:    1. 给父元素盒子设置边框;(不推荐使用)

                        ☆ 2. 给父元素盒子设置 overflow: hidden ;     (溢出:隐藏;)      使用此方法会触发一个叫 bfc

                                格式化上下文,可以解决此问题。

                                   

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值