css是什么意思 html+css网页设计

我的营销网 2025-01-01 02:55:47 3浏览

CSS 是什么？

CSS是Cascading Style Sheets的简称，中文称为层叠样式表。

在HTML中，属性和属性值用冒号隔开，并以分号结尾，用于描述HTML元素在浏览器中的呈现方式。

CSS 四种引入方式：

行内式

行内式是在标签的style属性中设定CSS样式。

嵌入式

将CSS样式集中写在网页的<head>标签的<style></style>标签对中。

导入式

将一个独立的.css文件引入HTML文件中，使用@import引入外部CSS文件。

链接式

将一个独立的.css文件引入到HTML文件中，使用<link>标记写在<head>标记中。

样式应用顺序：

  • 行内样式优先级最高。
  • 针对相同的样式属性，不同的样式属性将以合并的方式呈现。
  • 相同样式且相同属性以<head>中的顺序决定，后面会覆盖前面属性。
  • '!important'指定样式规则应用最优先。

基本选择器：

通用元素选择器

表示应用到所有的标签。

标签选择器

例如 div，用于选择所有使用 div 标签的元素。

类选择器

例如 .class，用于选择所有class属性中包含特定类的元素。语法：.类名{样式}。类名不能以数字开头，需区分大小写。

ID选择器

例如 ID名，用于选择ID属性为特定值的元素。语法：ID名{样式}。ID名不能以数字开头。

组合选择器：

  • 多元素选择器，例如 h3, h4，用于同时选择h3和h4标签。
  • 后代元素选择器，例如 div p，用于选择div标签里嵌套的所有P标签。
  • 子元素选择器，例如 ul > li，用于选择ul标签的直接子元素li。
  • 毗邻元素选择器，例如 h1 + p，用于选择紧随h1标签之后的同级标签p。

属性选择器：

  • [title] 选择所有具有title属性的元素。
  • [title='Nick'] 选择title属性等于'Nick'的元素。
  • [title~='Nick'] 选择title属性含有多个空格分隔的值中，至少有一个值为'Nick'的元素。
  • [title|=Nick] 设置所有title属性具有多个连字号分隔（hyphen-separated）的值，其中一个值以"Nick"开头的标签元素。
  • [title^=Nick] 选择属性值以指定值开头的每个标签元素。
  • [title$=Nick] 选择属性值以指定值结尾的每个标签元素。
  • [title=Nick] 选择属性值中包含指定值的每个元素。

伪类选择器：

  • a:link、a:hover、a:active、a:visited

    • ,分别用于定义未访问链接

    • 参数应用：四个角度的灵活使用
    • 双参模式：首参左上、右下；次参左下、右上
    • 三参布局：首参主控左上；次参负责左下、右上；终参定于右下
    • 四参环绕：左上、右上、右下、左下，按序而行

    简写秘籍：border

    • border样式：2px yellow solid，一气呵成

    阴影魔法：box-shadow

    • 位置先行，左右为先；上下随后；虚实与颜色，紧随其后
    • 例如：box-shadow: 10px 10px 5px 888;

    三角符号的边框艺术

    盒子模型的奥秘

    Padding决定了内容与边框间的距离；Margin则掌管元素间的空间。

    一参统领四边；两参则分治上下左右；三参则细分为上、左、右、下。

    display的变幻莫测

    • none隐身术，不显山露水。
    • block气场强大，显为块级元素。
    • inline随波逐流，呈现内联元素之态。
    • inline-block兼收并蓄，块级元素的高宽尽收囊中。
    • list-item列元素之姿，展现列表风采。

    visibility的隐现之道

    • visible明晰可见，毫无隐藏。
    • hidden遁于无形，不可见也。
    • collapse在表格中，可删行列而不扰布局。

    浮动的舞姿：float

    双块级标签同行，脱离文档流成为常态。

    • none无浮动，保持原位。
    • left左浮动，右浮动同理。

    清除浮动，掌控局面：

    • none顺其自然，两边皆可浮动。
    • left仅阻左方，不让左浮。
    • right仅拦右方，不让右浮。
    • both左右，全面控制。

    图像的剪裁艺术：clip

    rect定义剪裁位置，元素随之变动。

    • auto无剪切，保持原状。
    • 上右下左，顺次给出四个偏移值，定义剪裁区域。
    • 区域外透明处理，只展现内部内容。
    • 必须配合position:absolute;使用。
    • 例：clip:rect(0px, 60px, 200px, 0px);

    overflow的显示策略

    • visible内容超出不修剪，呈现在框外。
    • hidden内容被修剪，余下部分不可见。
    • scroll内容虽超标，但有滚动条助你一览无余。
    • auto智能判断，若超则现滚动条。

    定位高手：position

    • 通过left、top、right、bottom以及z-index进行元素的精准定位。
    • z-index仅在定位元素上发挥作用（如position:absolute;）。
    • 负数属性值亦可使用（如-1）。