【CSS】基础知识

1、什么是CSS?

　　
　　是英文Cascading Style Sheets 的缩写,用来写展示效果,可以使HTML代码与表现层分离

　　html主要是用来定义结构的,css定义样式的

2、选择器

/* 语法 */
    选择器名{
        属性名:属性值;
        ...;
        属性名:属性值;
}

 

 

 

3、选择器分类

1> 基本选择器 　　

1》标记选择器

标记{
属性名:属性值;
}

 

2》类别选择器

.类名{
属性名:属性值;
}

 


3》ID选择器

#id名{
属性名:属性值;
}

 


2> 复合选择器


1》交集选择器: 多个选择器之间没有任何分隔符

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

 


2》并集选择器: 多个选择器使用","分隔

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

 


3》后代选择器 : 多个选择器使用" "(空格)分隔

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

 

 

4、html与css结合方式

1> 内联样式 : 在html中的head标记之间

<head>
　　<style type="text/css">
　　css样式
　　</style>
</head>

 


2> 行内样式

<body style="color:red;"></body>

 


3> 外部样式

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

 



4> 使用@import 引用

1》在html文件中导入文件

<style type="text/css">
    @import url('table.css');
</style>

 


2》在css文件中导入文件

@import url('table.css');

 

 

 

 

5、CSS中的规则

　　1> 样式叠加 : 　　最终显示的样式,不冲突的多个样式的和
　　2> 优先级 : 　　   行内 > id选择器 > 类别选择器 > 标记选择器
　　3> 样式的继承: 　子类元素会继承父类元素的大部分样式

 

 

 

1、块元素: 默认会填充整个父元素的宽度的元素 <div></div>
2、行内元素: 除了块元素外的元素。 行内元素的宽度,取决于内容的宽度.就是包裹了内容的宽度。 <a></a> 
        <span></span>

3、与背景相关的属性
    background 简写属性在一个声明中设置所有的背景属性。

    可以按顺序设置如下属性：
    background-color    : 背景色
    background-image    : 背景图片
    background-repeat    : 设置是否及如何重复背景图像
    background-attachment    : 设置背景图像是否固定或者随着页面的其余部分滚动
    background-position    : 设置背景图像的开始位置。

    不简写:
    background-image: url('../../../html/face/08.gif');        
    background-position:20px 50px;
    background-repeat:repeat-y;
    background-color:pink;
    background-attachment:fixed;

    简写:
    background:pink,url('../../../html/face/08.gif'),repeat-y,scroll,center;

4、与边框相关的属性
    border:在一个声明中设置所有的边框属性。

    可以按顺序设置如下属性：
        border-width 设置宽度
        border-style 设置样式
        border-color 设置颜色

    
5、与文本相关的属性
    color        :设置文本的颜色。
    direction    :规定文本的方向 / 书写方向。
    letter-spacing  : 设置字符间距。
    line-height    : 设置行高。 
    text-align    : 规定文本的水平对齐方式。 
    text-decoration :规定添加到文本的装饰效果。  
            none 默认。定义标准的文本。 
            underline 定义文本下的一条线。 
            overline 定义文本上的一条线。 
            line-through 定义穿过文本下的一条线。 
            blink 定义闪烁的文本。 
            inherit 规定应该从父元素继承 text-decoration 属性的值。 
    text-indent    :规定文本块首行的缩进
    white-space    :规定如何处理元素中的空白。 
    word-spacing    :设置单词间距。 

6、字体属性
    font        :在一个声明中设置所有字体属性。
    font-family    :规定文本的字体系列。 
    font-size    :规定文本的字体尺寸。 
    font-style    :规定文本的字体样式。 
            normal 默认值。浏览器显示一个标准的字体样式。 
            italic 浏览器会显示一个斜体的字体样式。 
            oblique 浏览器会显示一个倾斜的字体样式。 
            inherit 规定应该从父元素继承字体样式。 
    font-weight    :规定字体的粗细。 

7、CSS 列表属性（List）
    list-style 在一个声明中设置所有的列表属性。
    list-style-image 将图象设置为列表项标记。 
    list-style-position 设置列表项标记的放置位置。 
    list-style-type 设置列表项标记的类型。 

8、盒子模型
    margin  外边距
    padding 元素与内边框的距离

9、CSS 定位
    position : 
          static     元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，
                行内元素则会创建一个或多个行框，置于其父元素中。
                
          relative  相对定位:
                元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
        
          absolute  绝对定位
                元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个
                元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素
                原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
                
          z-index:-100;   可被用于将在一个元素放置于另一元素之后。
 
10、float浮动:属性定义元素在哪个方向浮动。
    left 元素向左浮动。 
    right 元素向右浮动。 
    none 默认值。元素不浮动，并会显示在其在文本中出现的位置。 
    inherit 规定应该从父元素继承 float 属性的值。 


11、清除浮动clear
    left 在左侧不允许浮动元素。 
    right 在右侧不允许浮动元素。 
    both 在左右两侧均不允许浮动元素。 
    none 默认值。允许浮动元素出现在两侧。 
    inherit 规定应该从父元素继承 clear 属性的值。 

12、鼠标形状
    cursor :
        default 默认光标（通常是一个箭头） 
        auto 默认。浏览器设置的光标。 
        crosshair 光标呈现为十字线。 
        pointer 光标呈现为指示链接的指针（一只手） 
        move 此光标指示某对象可被移动。 
        e-resize 此光标指示矩形框的边缘可被向右（东）移动。 
        ne-resize 此光标指示矩形框的边缘可被向上及向右移动（北/东）。 
        nw-resize 此光标指示矩形框的边缘可被向上及向左移动（北/西）。 
        n-resize 此光标指示矩形框的边缘可被向上（北）移动。 
        se-resize 此光标指示矩形框的边缘可被向下及向右移动（南/东）。 
        sw-resize 此光标指示矩形框的边缘可被向下及向左移动（南/西）。 
        s-resize 此光标指示矩形框的边缘可被向下移动（北/西）。 
        w-resize 此光标指示矩形框的边缘可被向左移动（西）。 
        text 此光标指示文本。 
        wait 此光标指示程序正忙（通常是一只表或沙漏）。 
        help 此光标指示可用的帮助（通常是一个问号或一个气球）。 

    
13、与表格相关的属性
    border-collapse    规定是否合并表格边框。 
    border-spacing    规定相邻单元格边框之间的距离。 
    caption-side    规定表格标题的位置。 
    empty-cells    规定是否显示表格中的空单元格上的边框和背景。
    table-layout    设置用于表格的布局算法。 


14、CSS 伪类
    :active        向被激活的元素添加样式。    
    :hover        当鼠标悬浮在元素上方时，向元素添加样式。
    :link        向未被访问的链接添加样式。 
    :visited    向已被访问的链接添加样式。

    :first-child    向元素的第一个子元素添加样式。 
    :focus        向拥有键盘输入焦点的元素添加样式。
常用属性

 

posted @ 2022-04-24 21:56  Phoenixy  阅读(42)  评论(0)  编辑  收藏  举报