码迷,mamicode.com
首页 > Web开发 > 详细

css基本介绍

时间:2019-04-26 22:24:55      阅读:272      评论:0      收藏:0      [点我收藏+]

标签:结束   大小   footer   ref   line   href   demo   ...   符号   

CSS初识

CSS(Cascading Style Sheets)通常被称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。它就是包含一个或多个规则的文本文件。

构造规则

样式表的每个规则都有两个部分,即选择器(selection)和声明(declaration)。
技术图片

注意

  1. 选择器用于指定CSS样式作用的HTML对象,花括号内是对该对象设置的具体样式。
  2. 属性和属性值以“键值对”的形式出现。
  3. 属性是对指定的对象设置的样式属性,例如字体大小、文本颜色等。
  4. 属性和属性值之间用英文“:”连接。
  5. 多个“键值对”之间用英文“;”进行区分。

我们也可以在样式规则中用/*注释内容*/语法来注释内容。另外,样式会被该元素的后代继承,不过浏览器在解析代码时,只会解析离它最近的样式。

样式表的定义和使用

行内式(内联样式)

基本语法:

<label style="样式属性:属性值;样式属性:属性值;···">

内部样式表

基本语法:

<head>
<style type="text/CSS">
    选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>

外部样式表(外链式)

基本语法:

<head>
  <link href="CSS文件的路径" type="text/CSS" rel="stylesheet" />
</head>

说明:

  • type:定义所链接文档的类型,在这里需要指定为“text/CSS”,表示链接的外部文件为CSS样式表
  • rel:定义当前文档与被链接文档之间的关系,在这里需要指定为“stylesheet”,表示被链接的文档是一个样式表文件
  • link:该标签是一个单标签

或者:

<style type="text/css">
    @import url("外部样式表的文件名称")
</style>

选择器

标签选择器(元素选择器)

标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }  或者
元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

类选择器

.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

不过我们必须在标签里面如下定义:

<label class="类名"></label>

id选择器

#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}

不过我们也要在标签里面如下定义:

<label id="id名"></label>

通配符选择器

* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}

通配符选择器用“*”号表示,它是所有选择器中作用范围最广的,能匹配页面中所有的元素。

伪类选择器

伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果, 比如可以选择 第1个,第n个元素。

链接伪类选择器

  • :link:未访问的链接
  • :visited:已访问的链接
  • :hover:鼠标移动的链接上
  • :active:选定的链接
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    a:hover{
        color: red;
    }
</style>
<body>
<a href="http://www.baudu.com/">百度</a>
</body>
</html>

结构(位置)伪类选择器

  • :first-child:选取属于其父元素的首个子元素的指定选择器
  • :last-child:选取属于其父元素的最后一个子元素的指定选择器
  • :nth-child(n): 匹配属于其父元素的第 N 个子元素,不论元素的类型
  • :nth-last-child(n):选择器匹配属于其元素的第 N 个子元素的每个元素,不论元素的类型,从最后一个子元素开始计数

目标伪类选择器

:target目标伪类选择器 :选择器可用于选取当前活动的目标元素

复合选择器

交集选择器

我们直接把需要交集的选择器连在一起,如:

<style>
    p.class#id{
        ...
    }
</style>

并集选择器

在选择器的中间加上逗号:

<style>
    p,.class,#id{
        ...
    }
</style>

后代选择器

后代选择器又称为包含选择器,用来选择元素或元素组的后代,其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。

<style>
    p .class #id{
        ...
    }
</style>

子元素选择器

子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面,子级标签写在后面,中间跟一个 >进行连接,注意,符号左右两侧各保留一个空格。

<style>
    .demo > h3 {color: red;}
</style>

属性选择器

选取标签带有某些特殊属性的选择器 我们成为属性选择器

/* 获取到 拥有 该属性的元素 */
div[class^=font] { /*  class^=font 表示 font 开始位置就行了 */
            color: pink;
        }
div[class$=footer] { /*  class$=footer 表示 footer 结束位置就行了 */
            color: skyblue;
        }
div[class*=tao] { /* class*=tao  *=  表示tao 在任意位置都可以 */
            color: green;
        }

伪元素选择器

  • E::first-letter文本的第一个单词或字(如中文、日文、韩文等)
  • E::first-line文本第一行;
  • E::selection可改变选中文本的样式;
  • E::beforeE::after:在E元素内部的开始位置和结束位创建一个元素,该元素为行内元素,且必须要结合content属性使用;

标签选择模式

块级元素(block-level)

每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度、高度、对齐等属性,常用于网页布局和网页结构的搭建。
特点:

  • 独占一行
  • 高度,行高、外边距以及内边距都可以控制
  • 宽度默认是容器的100%
  • 可以容纳内联元素和其他块元素

行内元素(inline-level)

行内元素(内联元素)不占有独立的区域,仅仅靠自身的字体大小和图像尺寸来支撑结构,一般不可以设置宽度、高度、对齐等属性,常用于控制页面中文本的样式。
特点:

  • 和其他行内元素会在一行
  • 高、宽无效,但水平方向的padding和margin可以设置,垂直方向的无效
  • 默认宽度就是它本身内容的宽度
  • 行内元素只能容纳文本或则其他行内元素。(a特殊)

行内块元素(inline-block)

在行内元素中有几个特殊的标签如<img><input><td>,可以对它们设置宽高和对齐属性,我们称它们为行内块元素。
特点:

  • 和相邻行内元素(行内块)在一行上,但是之间会有空白缝隙
  • 默认宽度就是它本身内容的宽度
  • 高度,行高、外边距以及内边距都可以控制

标签显示模式转换display

  • display:inline:块转行内
  • display:block:行内转块
  • display: inline-block:块、行内元素转换为行内块

css基本介绍

标签:结束   大小   footer   ref   line   href   demo   ...   符号   

原文地址:https://www.cnblogs.com/MingleYuan/p/10776938.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!