• css简介及常用语法


    ①. 什么是Css?

    	层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用记语言的
    一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修
    饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。 
    	CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对
    网页对象和模型样式编辑的能力。
    

    层叠样式表 : 层叠 样式只会被覆盖 而不会被替代

    ②. CSS 的使用方式

    style属性  --->  <h1 style="css属性"></h1>
    style标签  ---> head标签里面 
    link  ---> <link rel="stylesheet" href="style.css">
    

    ③.基础选择器

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

    id选择器

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

    class选择器

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

    二、综合选择器

    1. 后代选择器 div p 
    2. 交集选择器  div.d1
    3. 并集选择器 div,p
    4. 子元素选择器  div>p 
    5. 序列选择器  ul li:first-child  ul:li:last-child
    6. 相邻兄弟选择器  div + p
    7. 普通兄弟选择器 div ~ p 
    

    三、继承和层叠

    1.继承

    父元素的某些css属性会被子元素无条件的继承过去。
    关于文字的css属性都可以进行继承:
    color text-  line- font- 
    

    2.层叠

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

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

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

    四、块级元素和行内元素

    div 块级元素
    
    span  行内元素
    

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

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

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

    display: inline block inlin-block
  • 相关阅读:
    IOS开发创建开发证书及发布App应用(六)——打包应用
    IOS开发创建开发证书及发布App应用(四)——创建配置概要文件
    IOS开发创建开发证书及发布App应用(五)——编译应用
    如何查看SQL Server的版本、补丁包信息?以及如何鉴别是否需要升级自己的SQL Server?
    如何用PowerShell列出你机器上的.NET Framework的版本号和SP服务补丁
    Linux 开放服务端口
    在CentOS/RHEL/Scientific Linux 6下安装 LAMP
    使用ownCloud在Linux安装你的个人云服务
    升級 Centos 6.5 的 php 版本
    reStructuredText(.rst)语法规则快速入门
  • 原文地址:https://www.cnblogs.com/kasl007/p/7078126.html
Copyright © 2020-2023  润新知