亿企邦
  • 首页
    •
  • 解决方案&服务
    •
  • 客户&案例
    •
  • 营销资讯
    •
  • 关于我们
    •
    15158846557 或 在线咨询 在线咨询
    亿企邦
    15158846557 或 在线咨询
    亿企邦

    快捷入口

    所在位置： 首页 > 营销资讯 > 网站运营 > CSS基础知识整理

    CSS基础知识整理

    时间：2023-07-19 23:27:01 | 来源：网站运营

    时间：2023-07-19 23:27:01 来源：网站运营

    CSS基础知识整理：

    1 什么是CSS？

    CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。
    CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

    2 CSS语法

    CSS基础语法
    CSS规则由两个主要部分构成：选择器以及一条或多条声明。
    每条声明由一个属性和一个值组成。属性(property)是设置的样式属性，每个属性有一个值，属性和值被冒号分开。

    比如 selector{property：value}
    选择器通常是需要改变样式的HTML元素。

    比如 h1{color:red; font-size:14px;} h1是选择器，color和font-size是属性，red和14px是值。
    注意：

    如果定义不止一个声明则需要用分号将每个声明分开。例如：p{text-align:center;color:red}
    如果值为若干单词，则要给值加引号： 例如：p {font-family: "sans serif";}

    CSS高级语法
    选择器的分组

    h1,h2,h3,h4,h5,h6 { color: green; }
    继承及其问题：根据 CSS，子元素从父元素继承属性。


    body { font-family: Verdana, sans-serif;}


    3 创建CSS

    CSS 创建样式表分为三种情况：
    内部样式表

    <head> <style type="text/CSS"> 选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;} div{width:200px; height:200px; border:1px solid red;} </style></head>
    行内式(内联样式)

    <div style="width:200px;height:100px;border:1px solid black;"></div>
    外部样式表(外链式)

    <head> <link rel="stylesheet" type="text/css" href="css/style.css"> </head>
    ​
    样式优先级：内联样式>内部样式>外部样式
    三种样式表区别：

    行内样式表 ：优点 书写方便；缺点 没有实现样式和结构相分离；使用情况 较少；控制范围 控制一个标签(少)。

    内部样式表：优点 部分结构和样式相分离； 缺点 没有彻底分；使用情况 较多；控制范围 控制一个页面(中)。

    外部样式表：优点 完全实现结构和样式相分离； 缺点 需要引入；使用情况 最多，推荐；控制范围 控制整个站点(多)。

    4 id和class选择器

    ID选择器：


    id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式，id 属性和身份证一样具有唯一性。

    HTML元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以 "#" 来定义。注意： id 属性不能以数字开头。


    语法：#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
    ​
    class选择器：
    class 选择器用于描述一组元素的样式，也叫做类选择器。

    class 可以在多个元素中使用，并且一个元素也可以指定多个类名。

    在 CSS 中，类选择器以一个点 "." 号来定义。

    同样的类名的第一个字符也不能使用数字。

    语法：.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
    ​
    ID 选择器和类（class）选择器的区别：
    相同点：

    不同点：

    5 CSS元素选择器

    最常见的CSS选择器就是元素选择器，也就是标签选择器，也就是在HTML中元素的最基本的选择器。


    语法：标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 或者元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
    标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式。

    6 CSS背景(background)

    background 属性用于定义 HTML 元素的背景。
    定义元素背景效果的 CSS 属性有五种：

    background-color 背景颜色background-image 背景图像background-repeat 背景图像设置水平或垂直平铺或不平铺background-position 背景图像设置定位background-attachment 背景图像设置固定或滚动​背景属性简写：body{ background:green url('images/fix.gif') no-repeat fixed 12px 24px;}当使用简写属性时，属性值的顺序依次为：background-color --> background-image --> background-repeat --> background-attachment --> background-position

    7 CSS外观属性

    CSS文本格式主要分为：文本颜色(color)、文本对齐方式、文本修饰、文本阴影、文本缩进、文本间距、字间距、文本空白处理、文本转换。
    ​
    文本对齐方式：text-align属性有四个值：left，center，right，justify(两端对齐)；属性默认值为auto。
    文本修饰：text-decoration 属性用来设置或删除文本的修饰。

    主要是用来删除超链接的下划线，也可以使用其他值来设置文本的修饰；

    text-decoration:overline，设置文本上划线。

    text-decoration:line-through; 设置文本中间划线。

    text-decoration:underline; 设置文本下划线。
    文本阴影：text-shadow: x y shadow color；

    其中 x 是水平阴影的偏移值，

    y 是垂直阴影的偏移值，

    shadow 用于指定阴影的模糊值，即模糊效果的作用距离，不允许负值。

    color 指定阴影的颜色。该属性有两个作用，产生阴影和模糊主体。
    文本缩进：用来指定文本的首行缩进，允许为负值，如果值是负数，第一行则向左缩进。

    CSS表示为：text-indent:2em，em 是相对文字大小的单位，1em 就是1个文字大小，2em 就是两个文字大小。
    文本间距：行高，也就是文本行的高度。例如：line-height：22px;
    字间距：letter-spacing 和 word-spacing 这两个属性都可用来增加或减少文本间的空白，即字间距。

    不同的是：
    letter-spacing 属性设置字符间距，而 word-spacing 属性设置单词间距。
    注意：word-spacing 属性对中文无效，因此在设置中文的字间距时请使用 letter-spacing 属性。
    letter-spacing 和 text-align：justify 是两个冲突的属性，不能同时使用；

    text-align:justify 是设置内容根据宽度自动调整字间距，使各行的长度恰好相等，实现文本两端对齐效果，

    而 letter-spacing 是指定一个固定的字间距。
    文本空白处理：white-space 属性指定元素内的空白如何处理，默认值为 normal 空白会被浏览器忽略。
    该属性还有4个值：

    nowrap 文本不会换行，禁止换行，文本会在同一行上继续，直到遇到 <br> 标签为止。
    pre 空白会被浏览器保留，这种方式类似 HTML 中的 <pre> 标签，用于定义预格式文本。
    pre-wrap 指定保留空白符序列，但是正常地进行换行。
    pre-line 指定合并空白符序列，但是保留换行符，并允许自动换行。
    文本转换：text-transform 属性控制文本中的字母。

    是用来指定在一个文本中的大写和小写字母，可用于将所有字句变成大写或小写字母，或每个单词的首字母大写。
    text-transform:capitalize， 定义文本中的每个单词以大写字母开头。
    text-transform:uppercase，定义文本仅有大写字母。
    text-transform:lowercase，定义文本仅有小写字母。
    ​

    8 CSS字体 (font)

    font 属性可用于设置文本字体，定义样式，如加粗，大小等，属于复合属性，也叫做简写属性。


    简写顺序：
    font-style(字体样式) --> font-variant(字体变形) --> font-weight(字体加粗) --> font-size(字体大小)/line-height --> font-family(设置文本字体)
    注意，font-size 和 font-family 的值是必需的，否则无效。
    ​
    (1)是绝对或相对大小，可以使用px、em、%和em组合来设置。

    <head> <style> body{font-size:100%} p{font-size:2.5em; } /* 2.5*16=40px */ </style></head><body> <p>使用%和em组合设置</p></body>
    ​
    (2)font-style 属性主要用于指定斜体文字。
    属性有三个值：

    9 CSS链接

    链接的四种状态是：

    a:link - 正常，未访问过的链接。a:visited - 已访问过的链接。a:hover - 当鼠标滑动到链接上时。a:active - 链接被点击的那一刻。

    10 CSS列表

    作用：1 设置不同的列表项标记 2 设置列表项标记为图像
    修改列表项标记使用 list-style-type，使用图像作为标记可以利用 list-style-image 属性完成。

    11 CSS表格

    表格边框： border
    表格宽度和高度：width 和 height
    表格对齐：text-align 和 vertical-align
    表格内边距：tr,td的padding设置
    ​

    <head> <style> #tab{ width:50%; font-family:"微软雅黑"; /*设置是否将表格边框合并为单一线条的边框*/ border-collapse:collapse; } #tab th,#tab td{ /*表格边框*/ border:1px solid #7AC942; /*表格内边距*/ padding:5px 10px; } #tab th{ color:white; background-color:#9C3; font-size:1.125em; /*左对齐*/ text-align:left; padding-top:4px; padding-bottom:8px; } #tab .list td{ /*边颜色*/ color:#000; /*背景颜色*/ background-color:#FFC; } caption{ margin-bottom:10px; font-weight:bold; } </style></head><body><table id="tab"> <caption>食物类别</caption> <thead> <tr class="list"> <th>粗粮</th> <th>蔬菜</th> <th>水果</th> </tr> </thead> <tbody> <tr> <td>大豆</td> <td>黄瓜</td> <td>香蕉</td> </tr> <tr class="list"> <td>高粱</td> <td>菠菜</td> <td>柠檬</td> </tr> <tr class="list"> <td>燕麦片</td> <td>白菜</td> <td>西瓜</td> </tr> </tbody></table></body>

    12 CSS 选择器

    1 分组和嵌套选择器

    例如：h1{color:gray;} p{color:gray;}可以写成：h1, p{color:gray;}.div1 p{ color:white;}.div1 p a{ color:yellow; font-weight:bold;}<div class="div1"> <p>嵌套选择器 <a href="#">深层嵌套选择器</a> </p></div>*{ padding:0; margin:0;}
    ​
    2 属性选择器


    <head> <style> [title]{ color:red; } </style></head><body> <h1>h1 标题不带有 title 属性</h1> <h2 title="标题">h2 可以设置样式</h2> <a href="#" title="链接">超链接可以设置样式</a></body><head> <style> [title=Hello]{ color:blue; } </style></head><body> <h1 title="Hello world">h1 标题 title="Hello world"</h1> <h2 title="Hello">h2 可以设置样式</h2> <a href="#" title="Hello">超链接可以设置样式</a></body><head> <style> [title~=Hello]{ color:green; } [lang|=zh]{ color:gray; } </style></head><body> <h1 title="world">h1 标题 title="world"</h1> <h2 title="Hello">h2 可以设置样式</h2> <h3 title="Hello Web">h3 可以设置样式</h2> <a href="#" title="Hello world">超链接可以设置样式</a> <a href="#" lang="zh-TW">超链接可以设置样式</a></body><head> <style> input[type="text"]{ width:150px; display:block; margin-bottom:5px; background-color:yellow; } input[type="button"]{ width:120px; margin-top:5px; background-color:green; } </style></head><body> <form name="input" action="demo.php" method="get"> 用户名：<input type="text" name="user" placeholder="请输入登录名"> 昵　称：<input type="text" name="name" placeholder="请输入角色名"> <input type="button" value="查询"> </form></body>

    3 组合选择器：组合选择符是包括各种简单选择器的组合方式，组合选择符说明了两个选择器直接的关系。

    13 CSS伪类(不区分大小写)

    CSS 伪类是用来向一些选择器添加特殊的效果。

    语法：选择器:伪类{attr:value;}
    CSS 类也可以使用伪类：选择器.class:伪类{attr:value;}
    ​
    (1)超链接伪类

    在浏览器中，链接的不同状态都可以以不同的方式显示：

    a:link{color:#FF0000;} /* 未访问的链接显示为红色 */a:visited{color:#00FF00;} /* 已访问的链接显示为绿色 */a:hover{color:#FF00FF;} /* 鼠标划过链接显示为紫红色 */a:active{color:#0000FF;} /* 已选中的链接显示为蓝色 */
    注意： 在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，a:active 必须被置于 a:hover 之后，才是有效的。


    (2)伪类和 CSS 类(伪类可以与 CSS 类配合使用)
    (3)CSS2 - :first - child 伪类

    <body> <p>第一个 p 元素</p> <p>第二个 p 元素</p> <p>第三个 p 元素</p></body>
    选择作为任何元素的第一个子元素 p。选择器使用 p:first-child。
    选择所有 p 元素中的第一个子元素 b。选择器使用 p>b:first-child。
    选择所有作为第一个子元素 p 中的所有 b 元素。选择器使用 p:first-child b。
    (4)CSS2 - :lang 伪类
    使用 :lang 伪类可以为不同的语言定义特殊的规则：

    html:lang(zh-CN){ color:blue;}​:lang(en)>p{ color:gray;}

    14 CSS 伪元素

    CSS 伪元素是用来为一些选择器添加特殊的效果。

    语法：选择器:伪元素{attr:value;}
    CSS 类也可以使用伪元素：选择器.class:伪元素{attr:value;}


    (1)CSS2 - :before 伪元素

    h1:before{ content:url(images/logo.gif);}
    (2)CSS2 - :after 伪元素

    h1:after{ content:url(images/logo.gif);}
    content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容，该属性用于定义元素之前或之后放置的生成内容。
    content 的内容一般可以为四种：

    15 块级元素和行内元素

    块级元素(block-level)：每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。

    常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。
    块级元素特点：



    行内元素(inline-level)：不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置高度，宽度，对齐等属性，常用于控制页面中文本的样式。常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。
    行内元素的特点：

    16 行内块元素(inline-block)

    在行内元素中有几个特殊的标签——<img />、<input />、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。
    行内块元素的特点：

    17 CSS 三大特性

    层叠、继承、优先级
    CSS层叠性：是指多种CSS样式的叠加。
    CSS继承性：是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。

    想要设置一个可继承的属性，只需将它应用于父元素即可。简单理解就是： 子承父业。
    CSS优先级：定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。

    使用了 !important声明的规则。
    考虑权重时，需要注意的一些点：

    18 盒子模型（CSS重点）

    CSS三大模块： 盒子模型 、浮动 、定位。
    盒子模型：就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。
    ​
    盒子边框（border）

    语法：border : border-width || border-style || border-color 常用属性值：none：没有边框即忽略所有边框的宽度（默认值）、solid线(单实线)、dashed(虚线)、dotted(点线)、double(双实线)

    19 实现居中

    1 外边距实现盒子居中
    满足两个条件：

    例如：.header{ width:960px; margin:0 auto;}
    2 文字盒子居中

    20 盒子模型布局稳定性

    按照优先使用宽度 （width）、其次 使用内边距（padding）、再次 外边距（margin）。
    width > padding > margin
    原因：

    21 盒子阴影

    语法： box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影；

    22 浮动(float)

    CSS的定位机制有3种：普通流（标准流）、浮动和定位。
    浮动：是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。
    语法：选择器{float:属性值;} 属性值可以是left，right，both，none。
    目的：为了让多个块级元素同一行上显示。

    23 定位(position)

    position 属性值分为四种：

    叠放次序（z-index的特点：



    关键词：整理,知识,基础

    推荐文章

    新闻资讯

    整合营销 网络营销 网络推广 信息时代 建站知识 网站运营 电子商务 营销百科 公司新闻 行业动态 品牌营销

    推荐资讯

    74
    73
    25
    news

    微信公众号

    版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

    为了最佳展示效果，本站不支持IE9及以下版本的浏览器，建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
    关闭