CSS - 码农教程

CSS

什么是CSS

CSS全称Cascading Style Sheet层叠样式表

用来调整美化网页（对不同的模块去调整宽度高度背景字体大小等）

HTML用来填入基本网页整体内容和结构划分，而CSS则用来美化调整各个部分

基础语法

可以声明在html的style中，也可以外部导入

选择器

什么是选择器：指定出想要要调整的标签

id选择器:定位到指定id的标签(#+id选择)id不能重复

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第二的标签</title>
    <style>                 
        #a{                <!--id为a的标签被修饰 -->
            width: 100px;  
            height: 100px;
            background: red;
        }
</style>
</head>
<body>
    <div id="a">

    </div>   
</body>
</html>

类选择器：找到所有此类的标签（.+class）class名可以重复

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第二的标签</title>
    <style>                 
        .a{                <!--class为a的标签都被修饰 -->
            width: 100px;  
            height: 100px;
            background: red;
        }
</style>
</head>
<body>
    <div class="a"></div>  
    <div class="a"></div>  
     <p class="a"></p>
</body>
</html>

标签选择器：选择所有此标签（标签名）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第二的标签</title>
    <style>                 
        div{                <!--所有的div标签都被修饰 -->
            width: 100px;  
            height: 100px;
            background: red;
        }
</style>
</head>
<body>
    <div class="a"></div>  
    <div class="a"></div>  
     <p class="a"></p>     <!--不是div标签所以未被修饰 -->
</body>
</html>

属性选择器：选出所有带有此属性的标签（[属性名]）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第二的标签</title>
    <style>                 
        [class]{                <!--含有class属性的标签都被修饰 -->
            width: 100px;  
            height: 100px;
            background: red;
        }
</style>
</head>
<body>
    <div class="a"></div>  
    <div id="a"></div>   <!--没有class属性所以未被修饰 -->
     <p class="a"></p>    
</body>
</html>

并集选择器：使用多个选择器逗号隔开（#id，.class,[属性]，标签名）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第二的标签</title>
    <style>                 
        #a,[class]{                <!--包含两种选择器的范围 -->
            width: 100px;  
            height: 100px;
            background: red;
        }
</style>
</head>
<body>
    <div class="a"></div>  
    <div id="a"></div>   
     <p class="a"></p>    
</body>
</html>

常用属性

字体属性

font-family：设置字体

font-style：设置斜体

font-variant：英文文本大小写

font-weight：设置字体的粗细

font-size：设置字体大小

颜色与背景属性

color：设置内容颜色

background-color：设置标签背景颜色

background-image：设置背景图案

background-repeat：设置背景图填充重复方式

background-position：设置背景图案

background-size：设置背景图案大小

文本属性

text-align：设置文本的对齐方式

text：indent：设置文本首行缩进

line-height：设置文本的行高

a:link：设置链接为访问时的文本状态

a:visited：设置链接已经访问过的状态

a:hover：设置链接的鼠标激活状态

边框属性

有上下左右和颜色样式宽度各种搭配

border：没有设定方向和修饰属性就是四边加设置颜色宽度样式

border-color：就是全部四边加只设置颜色

border-top：就是全部颜色宽度样式都设置并且只给上面上边框

border-left-style：就是只设置左边且只设置样式

块元素属性

margin外边距与padding内边距

块元素与内联元素

块元素：会独占一行，默认宽度是填充父元素的宽度，高度是内容的高度。可再自定义宽高

常见的块元素有：ul列表、form表单、h1-h6标题、hr水平线、p段落、div

内联元素：不会独占一行，不能设置宽高还有边距这些，范围只是仅仅包裹内容。

常见的内联元素有：a链接、em斜体、img图片、input输入控件、label标签、select下拉选择器、textarea多行文本输入、span

块和内联的转换：

display:block 内转块

display:inline 块转内

display:inline-block 转成内联块，此元素不仅有块的特性修改宽高边距等还可以同行只要宽度够

浮动：通过设置浮动可以到达同行的效果不用去转内联块

Float常跟属性值left、right、none，相对于父元素 Float:none 不使用浮动 Float:left 靠左浮动 Float:right 靠右浮动

绝对定位与相对定位：

对于嵌套元素的相对定位，定位的元素的父元素是用相对定位就行。相当于定位position-relative还是absolute属性是作用于子元素

快到碗里