CSS核心总结

css引入方式

外部样式表

<!-- rel：relative 表示关联一个样式表 -->
<!-- type属性表示了这是标准的css -->
<link rel="stylesheet", type="text/css",href="URL">

内部样式表 <head>标签中引入

<style>
    #app{color:red;}
</style>

行内样式表

<div style="color:red;">hello world!</div>

css选择器

语法规则

选择器名{
    属性名1:值1;
    属性名2:值2;
}

元素选择器

选择器名为标签名，如div

id选择器

每个html文件id值必须唯一
#id名{}

class选择器

不同标签可以拥有同一个class
.class名{}

后代选择器

选择标签内部中所有的某一种标签

<style>
    #app p{
        color:red;
    }
</style>
<div id="app">
    <p class="classname">红色</p>
</div>
<!-- 选择id="app"元素下所有的<p>标签 -->

群组选择器

<!-- ,分割不同选择器 -->
<style>
    .class,#app,div{
        font-size:10px;
        color:green;
    }
</style>

字体样式

字体相关的CSS属性
属性	说明
font-family	字体类型
font-size	字体大小
font-weight	字体粗细
font-style	字体风格
color	字体颜色

.id{
    font-family:Arial;
    font-size:10px;
    /* 加粗 */
    font-weight:bold;
    /* 斜体,不常用 */
    font-style:italic;
    color:#ff0000;
}

文本样式

文本样式属性
属性	说明
text-indent	首行缩进与font-size两倍关系
text-align	水平对齐 center居中
text-decoration	文本修饰：{none:取消划线效果; underline:下划线; line-through:中划线}
text-transform 大小写转换	uppercase lowercase
line-height	行高,px,em
letter-spacing	字母间距
word-spacing	词间距

边框样式

边框整体样式属性
属性	说明	属性值
border-width	边框的宽度
border-style	边框的外观	none:无样式 dashed:虚线 solid:实线
border-color	边框的颜色	属性可简写 border: 1px solid red;

边框局部样式

p{
    border-top-style:solid;
    border-left:1px solid red;
    border-bottom:1px solid red;
    border-right:1px solid red;
}

列表样式

list-style-type作用于<ul>或<ol>边表,但原生列表项符号很丑，记住下面这个就可以了

/* 不使用原生符号 */
list-style-type:none;
/* 使用图片作为列表项符号 */
/* 实际开发用iconfont图标技术实现 */
list-style-image: url(图片路径);

表格样式

表格标题位置，默认在上方 table{caption-side:bottom;}
表格边框合并，无空隙 table{border-collapse:collapse;}
表格边框间距 table{border-spacing:8px;}

图片样式

图片大小: width:30px;height:20px
图片边框: border: 1px solid red;
图片对齐: text-align:center(left、right) 作用于<img>标签父元素
文字环绕: float: left、right向左环绕和向右环绕

背景样式

背景样式属性
属性	说明
background-color	定义背景颜色
background-image	定义背景图片地址 background-image: url(图片路径);
background-repeat	定义背景图片重复，例如横向重复repeat-x、纵向重复repeat-y,只有元素大于图片大小，才会平铺
background-position	定义背景图片位置
background-attachment	定义背景图片固定

超链接样式

a{
    /* 链接未被访问样式 */
    color:red;
    text-decoration: none;
}
a:hover
{
    /* 鼠标经过时样式 */
    color:blue;
    text-decoration:underline;
}
/* :hover伪类还可以作用于其他标签 */
/* 如div:hover img:hover */
p{
    /* 鼠标样式 */
    cursor:pointer/text;
}

盒子模型

html元素可分为块级元素和内联元素，块级元素会独占一行。每个元素都看成一个盒子，盒子模型是由四个属性组成的：content（内容）、padding（内边距）、margin（外边距）和border（边框）。在盒子模型中，描述content还有宽度width和高度height两大辅助性属性，padding（内边距）、margin（外边距）和border（边框）则有四个方向的子属性。并且所有的元素都可以看成一个盒子。

宽高：width、height，针对content区域，并且只能作用于块级元素（包括被display:inline-block修饰的块级元素）。

内联元素设置的width和height无法生效，它的宽度和高度只能由内容区撑起来。

内边距描述了元素的背景，background作用于此区域。
另外，display:inline-block可以将块级元素转变成内联元素。

padding简写形式：

padding:20px 
/* 表示4个方向的内边距都是20px。 */

padding:20px 40px
/* 表示padding-top和padding-bottom为20px，
padding-right和padding-left为40px。 */

padding:20px 40px 60px 80px
/* 表示padding-top为20px，padding-right为40px， 
padding-bottom为60px，padding-left为80px。*/

外边距指的是两个盒子之间的距离，它可能是子元素与父元素之间的距离，也可能是兄弟元素之间的距离。
当只有父元素时，元素设置的margin就是相对于父元素之间的距离。
margin距离是指两个边框之间的距离。

浮动布局

引述：什么是正常文档流？
正常文档流，将一个页面从上到下分为一行一行，其中块元素独占一行，相邻行内元素在每一行中按照从左到右排列直到该行排满。

如果我们想要改变正常文档流，可以使用有两种方法：浮动和定位。

目前浮动只需要了解float属性，属性值：left、right

浮动会影响周围元素，并且还会引发很多预想不到的问题。在CSS中，可以使用clear属性来清除浮动带来的影响。
clear:both

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        /*定义父元素样式*/
        #father
        {
            width:300px;
            background-color:#0C6A9D;
            border:1px solid silver;
        }
        /*定义子元素样式*/
        #father div
        {
            padding:10px;
            margin:15px;
        }
        #son1
        {
            background-color:hotpink;
            float:left;          /*左浮动*/
        }
        #son2
        {
            background-color:#FCD568;
            float:right;        /*右浮动*/
        }
        .clear{clear:both;}
    </style>
</head>
<body>
    <div id="father">
        <div id="son1">box1</div>
        <div id="son2">box2</div>
        <div class="clear"></div>
    </div>
</body>
</html>

定位布局

定位布局使程序员可以精准定位页面中的任意元素，定位布局通过position属性来实现的，其中position属性取值如下表所示。

position属性取值
属性值	说明
fixed	固定定位
relative	相对定位
absolute	绝对定位
static	静态定位（默认值）

固定定位

语法：

position: fixed;
top: 像素值;
bottom: 像素值;
left: 像素值;
right: 像素值;

固定定位确定了元素在整个屏幕的位置。一般只用到top和left两个属性。

拖动浏览器的滚动条，其中有固定定位的div元素不会有任何位置改变，但没有定位的div元素会改变

固定定位最常用于实现“回顶部特效”

相对定位

语法同上。
相对定位元素的位置是相对于原始位置而言，我们称没有加定位布局效果的原本位置为原始位置。

绝对定位

与固定定位类似，但它不会随浏览器的滚动条移动。

绝对定位元素的前面或后面的元素会认为这个元素并不存在，此时这个元素浮于其他元素上面，已经完全独立出来了。

静态定位

默认定位方式。
一般情况下我们使用不到position:static的，不过在使用JavaScript来控制元素定位时，如果想要使得元素从其他定位方式变成静态定位，就需要使用position:static来实现。

posted @ 2021-02-06 00:25 Dallas98 阅读(67) 评论(0) 收藏举报

刷新页面返回顶部

Dallas98