• Css


    CSS

    介绍

    层叠样式表(Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。

    CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

    CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

    使用方式

    行内式

    行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势,不推荐使用。

    内嵌式

    嵌入式是将CSS样式集中写在网页的标签对的标签对中。

    格式如下:

    <head>
    <style type="text/css">
        /*此处写CSS样式*/
    </style>
    </head>
    

    缺点是对于一个包含很多网页的网站,在每个网页中使用嵌入式,进行修改样式时非常麻烦。单一网页可以考虑使用嵌入式。

    链接式

    将一个.css文件引入到HTML文件中,链接式使用HTML规则引入外部CSS文件,它在网页的标签对中使用标记来引入外部样式表文件,使用语法如下:

    <link href="mystyle.css" rel="stylesheet" type="text/css"/>
    

    使用链接式时,它会以网页文件主体装载前装载CSS文件,因此显示出来的网页从一开始就是带样式的效果的,这是链接式的优点。

    css基础选择器

    html标签选择器

    通过html标签名来选择元素
    ① 所有的html标签都可以当做选择器
    ② 无论标签藏多深都会被选中
    ③ 选择的是所有的标签而不是具体某个标签。所以说我们通过html标签选择器来设置的都是一些共性问题。
    

    id选择器

    ① 任何的标签都可以有id属性和属性值(因为id是一个全局属性)。id命名不能随意的命名。
    大小写敏感 ,id的名字中可以有数字字母下划线,但是要以字母开头。
    ② 但是id名不能够重复 
    

    class选择器

    ① 任何的标签都可以使用class属性(class属性也是一个全局属性) 
    ② class属性名可以重复使用 
    ③ 一个class属性中,可以有多个class属性值。
    

    css综合选择器

    后代选择器  div p
    交集选择器 h3.test
    并集选择器  div,p
    子(直系儿子)元素选择器  div>p
    序列选择器 ul li:first-child    ul li:last-child
    相邻兄弟选择器  div + p
    普通兄弟选择器  div~p
    

    继承和层叠

    继承:父元素的某些css属性会被子元素无条件的继承过去。

    关于文字的css属性都可以进行继承:

    color text-  line- font- 
    

    层叠 :层叠解决的是css冲突的问题。

    比较权重来解决层叠问题。

    !important 能够把"单独属性"的权重变为无限大。 尽量少用。

    块级元素和行内元素

    div 块级元素

    span 行内元素

    块级元素和行内元素的区别:

    1. 行内元素部不能够设置宽度和高度。行内元素的宽度和高度是标签内容的宽度和高度。块级元素可以设置宽度和高度。
    
    2. 块级元素会独占一行。而行内元素却部能够独占一行,只能和其他的行内元素共用一行。
    
    3. 如果块级元素不设置宽度,那么块级元素会自动的沾满父元素的全部宽度。
    

    块级元素和行内元素之间的转换

    display: inline block inlin-block
  • 相关阅读:
    第二节:如何正确使用WebApi和使用过程中的一些坑
    nodejs中function*、yield和Promise的示例
    关于nodejs访问mysql的思考
    nodejs使用log4js记录日志
    nodejs初识
    Spring学习笔记(入门)
    mybatis使用注解开发
    MyBatis配置文件中的常用配置
    using 自动释放资源示例
    Java将byte[]和int的互相转换
  • 原文地址:https://www.cnblogs.com/elaine0804/p/7077528.html
Copyright © 2020-2023  润新知