2九、CSS

时间 2019-11-22

标签 css 栏目 CSS 繁體版

原文原文链接

CSS：页面美化和布局控制css

概念：层叠样式表，多个样式能够做用在同一个html的元素上，同时生效html

好处：一、功能强大布局

二、将内容展现和样式控制分离，下降耦合度，让分工协做更容易，提升开发效率字体

CSS的使用：CSS与html结合使用orm

一、内联样式：在标签内使用style属性指定CSS代码htm

<div style="color: blue"> hello </div>

二、内部样式：在head标签内，定义style标签，style标签的标签体内容就是css代码资源

<style>
    div{
        color: blue;
    }
</style>

三、外部样式：一、定义css资源文件开发

二、在head标签内，定义link标签，引入外部的资源文件it

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="DemoCSS.css">

</head>

注意：1，2，3中方式，css做用范围愈来愈大class

1方式不经常使用，后期经常使用2，3

CSS的语法：

选择器{

属性名1:属性值1；

属性名2:属性值2；

···

}

选择器：筛选具备类似特征的元素

注意：每一对属性最后用；隔离，最后的能够忽略

选择器类型：

一、基本选择器：id选择器：选择具体的id属性值的元素，建议在一个html页面中id值惟一

#id属性值{}

<style>
    #div1{}
</style>

<div id="div1"> hello</div>

元素选择器:选择具备相同标签名称的元素

标签名称{}

<style>
    div{}
</style>

<div> hello</div>

类选择器：选择具备相同的class属性值的元素

.class属性值{}

注意：优先级顺序：id>类 >元素

<style>
    .div{}
</style>

<div class="div"> hello</div>

二、扩展选择器：全部元素选择器：选择全部元素

*{}

<style>
    *{}
</style>

并集选择器：选择多个选择器

选择器1，选择器2{}

<style>
    div,p{}
</style>

<div class="div"> hello</div>
<p> </p>

子选择器：选择器1元素下的选择器2元素

选择器1 选择器2{}

<style>
    div p{}
</style>

<div class="div"> <p>hello </p></div>

父选择器：选择器2的父元素选择器

· 选择器1>选择器2{}

<style>
    p>div{}
</style>

<div class="div"> <p>hello </p></div>

属性选择器：选择元素名称，属性名=属性值的元素

元素名称 [属性名=“属性值”]{}

<style>
    div[class=div]{
        color: blue;
    }
</style>

<div class="div"> <p>hello </p></div>

伪类选择器：选择一些元素具备的状态

元素：状态{}

<style>
    a:active{}
</style>

<a></a>

属性：

一、字体、文本

font-size:字体大小

color：文本颜色

text-align：对齐方式

line-height：行高

二、背景

background

三、边框

border

四、尺寸

width

height

五、盒子模型：控制布局

margin：外边距

padding：内边距

注意：默认状况下，内边距会影响整个盒子的大小

box-sizing：：border-box；设置盒子属性，，让width和height就是最终盒子大小

float：浮动

left

right

<style>
    div{
        font-size: x-small;
        color: blue;
        text-align: center;
        line-height: normal;
        background: chartreuse;
        border: black;
        width: 100px;
        height: 200px;
        box-sizing: border-box;
        margin: 100px;
        padding: 20px;
    }
</style>

1. CSS：九宫格
2. css 九宫格
3. 智力扣（2）——九九扣
4. 九九乘法表--2
5. 2九、Jquery Ajax
6. css(2)
7. CSS-2
8. CSS - 2
9. 2.CSS
10. css 2
更多相关文章...
• jQuery Mobile CSS 类 - jQuery Mobile 教程
• CSS 指南 - 网站建设指南
• RxJava操作符（九）Connectable Observable Operators
• 使用阿里云OSS+CDN部署前端页面与加速静态资源