CSS初步学习

其他 2019-04-23 01:19:20 阅读次数: 0

CSS介绍

  • CSS学习(指层叠样式表）（会用它装饰HTML即可）

CSS概述

  • CSS 指层叠样式表 (Cascading Style Sheets)
  • 样式定义如何显示 HTML 元素
  • 样式通常存储在样式表中
  • 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
  • 外部样式表可以极大提高工作效率
  • 外部样式表通常存储在 CSS 文件中
  • 多个样式定义可层叠为一

如何创建CSS

  • 根据CSS在HTML文档中的使用方法和作用范围的不同，将它分为三大类：行内样式，内部样式《表，外部样式表，外部样式表有可分为链入外部样式和导入外部样式表
行内样式

  • 也叫内联样式表

  • 基本语法

    <标记 style = "属性:值;属性:值">

    • 标记中的style属性只影响该元素，行内样式的优先级是这四种里最高的
外部样式表
链入外部样式表
  • 当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link>标签链接到样式表。<link>标签在（文档的）头部：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
  • 说明
    1. href：样式表存放路径
    2. rel：定义链接的文件与HTML之间的关系，stylesheet是指在本页面中使用这个外部样式表
  • 使用前需要先定义一个CSS文件
    • 浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。
    • 外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
  • 不要在属性值与单位之间留有空格。假如你使用 “margin-left: 20 px” 而不是 “margin-left: 20px” ，它仅在 IE 6 中有效，但是在 Mozilla/Firefox 或 Netscape 中却无法正常工作。
导入式外部样式表

  • 指在HTML文件头部的<style>元素里导入一个外部样式表，导入外部样式表采用import方式

  • 基本语法

    @import url("样式表路径")

    写法还可以有这么几种

    1. url(样式表路径)
    2. url’样式表路径’
    3. url"样式表路径"
内部样式表
  • 当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样:
<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

CSS语法

  • 规则由选择器，和一跳或多条声明构成

  • 选择器通常是您需要改变样式的 HTML 元素。

  • 每条声明由一个属性和一个值组成。

  • 属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

    selector {property: value}

  • 值若为若干值，则要加引号

  • 多重声明加分号

CSS 语法

CSS高级语法(选择器)

  • 大体分为基本，组合，属性，伪类，伪对象
选择器的分组
  • 你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。
h1,h2,h3,h4,h5,h6 {
  color: green;
  }
基本选择器
标记选择器

标记名{属性:值;}

类选择器
  • 基本语法

标记名.类名{}

  • 类选择器针对标记的全局属性class，引用方式为：

<标记名 class="类名">

  • 使用实例

    该例子只允许p来引用
p.text1{color:black;font-family:14px}
<p class="text1">
若想其他标记引用，那么语法如下
.text1{color:black;font-family:14px}
<h4 class="text1">

  • 类名的第一个字符不能使用数字

id选择器

  • 可以为标有特定 id 的 HTML 元素指定特定的样式,和类选择器基本类似

  • id 选择器以 “#” 来定义，作用于全局属性id

  • 一般针对某个特定的元素作用一次，不推荐重复使用、

  • 语法

    标记名#id名{属性:值}

    <标记名 id="id名">

  • 例如

#red {color:red;}
#green {color:green;}

下面的 HTML 代码中，id 属性为 red 的 p 元素显示为红色，而 id 属性为 green 的 p 元素显示为绿色。

<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>
  • 注意id只能在每个HTML文档里出现一次
通用选择器
  • 用*表示，匹配网页所有的元素除非使用更为具体的选择器来指定某一元素
  • 不同于body里面设置的属性，通用选择器对应每一个元素，而非body的继承属性
派生选择器
  • 如，更加详细的指定
li strong {
    font-style: italic;
    font-weight: normal;
  }
其他选择器
组合选择器
  • 主要有五个类别：多元素选择器，后代选择器，子选择器，相邻选择器，兄弟选择器

  1. 多选择选择器

    语法：

    E,F{属性 1:值;}

  2. 后代选择器，类似于派生选择器

    语法：

    E F{属性 1:值}

    相当于E中的F

  3. 子元素选择器

    语法：

    E>F{属性:值}

    E>F表示选择了E元素下的所有子元素F

    例如：

    .text>li>a{color:red}

    只有遵循这个顺序的a标记才会起作用

  4. 相邻兄弟选择器

    语法：

    E+F{属性:值}

    选择的紧接在另一元素后的元素，而且他们具有相同的父元素，即E,F有相同的父元素且F在E的后面紧紧相邻

    也就是，只有F元素才会起作用

  5. 一般兄弟选择器

    语法

    E~F{属性:值}

    选择E元素后面的所有兄弟元素，和相邻选择器类似，区别在于：一般会把E后面的所有F元素作用

  6. 伪选择器

    语法：

    E:伪类{属性:值}

    伪类和类不同，伪类是提前定义好的，不能像类一样随意使用名字

    常用伪类如下

    选择器 说明 示例
    E:link 未被单击的E元素 a:link{color:red}
    E:hover 鼠标悬停其上的E元素 a:hover{color:red}
    E:active 被用户激活（在鼠标单击与释放之间发生的时间）时的E元素 a:active{color:red}
    E:visited 已被单击的元素 a:visited{color:red}
    E:first-child 父元素E的第一个子元素 a:first-child{color:red}
    E:enabled 表单中激活的元素
    E:focus 当前焦点元素E
    E:disabled 表单中禁用的元素
    E:checked 被选中的单选按钮和复选框元素

  7. 伪对象选择器

    语法：

    E::伪对象{属性:值}

    选择器 说明 示例
    E::first-letter 对象的第一个字符，仅作用于块对象 p::first-letter{font-size:14px}
    E::first-line 对象内的第一行，仅作用于块对象 …
    E::before 和content属性一起使用，设置在对象发生前的内容 …
    E::after 和content属性一起使用，设置在对象发生后的内容 …
    E::selection 设置对象被选择时的样式 …
属性和值选择器
  • 可以为拥有指定属性的 HTML 元素设置样式，
  • 只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器

  1. 存在属性匹配

    通过匹配存在的属性来控制元素的样式

    a[href]{color:red}将任何带有href属性的a标记为红色

  2. 精准属性匹配

    只有当属性完全匹配指定的属性值才会应用样式

    a[href="www.baidu.com"]{color:red}

  3. 前缀匹配

    只要属性值的开始字符串匹配指定的字符串，即可应用

    [id^="user"]{color:red}

  4. 后缀匹配

    与前缀的相反，后面字符匹配就行

    [id$="user"]{color:red}

  5. 子字符串匹配

    只要属性存在指定字符串即可应用

    [id*="user:red"]

下面的例子为带有 title 属性的所有元素设置样式：

[title]
{
color:red;
}

下面的例子为 title=“W3School” 的所有元素设置样式：

[title=W3School]
{
border:5px solid blue;
}

下面的例子为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值：

[title~=hello] { color:red; }

下面的例子为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值：

[lang|=en] { color:red; }

CSS样式

CSS背景
背景色

  • 这条规则把元素的背景设置为灰色：

    p {background-color: gray;}

  • 如果您希望背景色从元素中的文本向外少有延伸，只需增加一些内边距：

    p {background-color: gray; padding: 20px;}
背景图像

  • 如果需要设置一个背景图像，必须为这个属性设置一个 URL 值：

    body {background-image: url(/i/eg_bg_04.gif);}
背景重复

  • 属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。

    body
  { 
  background-image: url(/i/eg_bg_03.gif);
  background-repeat: repeat-y;
  }
背景定位
  • 可以利用 background-position 属性改变图像在背景中的位置。
单一关键字 等价的关键字
center center center
top top center 或 center top
bottom bottom center 或 center bottom
right right center 或 center right
left left center 或 center left
背景关联

  • 如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。

    您可以通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响：

    body 
  {
  background-image:url(/i/eg_bg_02.gif);
  background-repeat:no-repeat;
  background-attachment:fixed
  }
CSS文本
缩进文本

通过使用 text-indent 属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。

这个属性最常见的用途是将段落的首行缩进，下面的规则会使所有段落的首行缩进 5 em：

p {text-indent: 5em;}

注意：一般来说，可以为所有块级元素应用 text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用 text-indent 属性。不过，如果一个块级元素（比如段落）的首行中有一个图像，它会随该行的其余文本移动。

提示：如果想把一个行内元素的第一行“缩进”，可以用左内边距或外边距创造这种效果。

  • 使用负值

text-indent 还可以设置为负值。利用这种技术，可以实现很多有趣的效果，比如“悬挂缩进”，即第一行悬挂在元素中余下部分的左边：

p {text-indent: -5em;}

不过在为 text-indent 设置负值时要当心，如果对一个段落设置了负值，那么首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题，建议针对负缩进再设置一个外边距或一些内边距：

p {text-indent: -5em; padding-left: 5em;}
  • 使用百分比值

text-indent 可以使用所有长度单位，包括百分比值。

百分数要相对于缩进元素父元素的宽度。换句话说，如果将缩进值设置为 20%，所影响元素的第一行会缩进其父元素宽度的 20%。

在下例中，缩进值是父元素的 20%，即 100 个像素：

div {width: 500px;}
p {text-indent: 20%;}

<div>
<p>this is a paragragh</p>
</div>
  • 继承

text-indent 属性可以继承，请考虑如下标记：

div#outer {width: 500px;}
div#inner {text-indent: 10%;}
p {width: 200px;}

<div id="outer">
<div id="inner">some text. some text. some text.
<p>this is a paragragh.</p>
</div>
</div>

以上标记中的段落也会缩进 50 像素，这是因为这个段落继承了 id 为 inner 的 div 元素的缩进值。

水平对齐
垂直对齐方式
  • vertical-align
行高
  • line-height
字间隔

  • word-spacing 属性可以改变字（单词）之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。

  • word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值，那么字之间的间隔就会增加。为 word-spacing 设置一个负值，会把它拉近：

p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}

<p class="spread">
This is a paragraph. The spaces between words will be increased.
</p>

<p class="tight">
This is a paragraph. The spaces between words will be decreased.
</p>
字母间隔

  • letter-spacing 属性与 word-spacing 的区别在于，字母间隔修改的是字符或字母之间的间隔。

  • 与 word-spacing 属性一样，letter-spacing 属性的可取值包括所有长度。默认关键字是 normal（这与 letter-spacing:0 相同）。输入的长度值会使字母之间的间隔增加或减少指定的量：

h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}

<h1>This is header 1</h1>
<h4>This is header 4</h4>
字符转换
  1. none 不做变动
  2. uppercase 全大写
  3. lowercase 全小写
  4. capitalize 单词首字母大写
文本装饰
  1. none
  2. underline 加下划线
  3. overline 上划线
  4. line-through 贯穿线
  5. blink 文本闪烁
文本阴影
  • text-shadow
书写模式

  • writing-mode

  • 值

    1. horizontal-tb:水平，左-右
    2. verical-rl:垂直，右-左
    3. verical-lr:垂直，左-右
    4. lr-tb:水平，左右
    5. tb-rl:垂直，右左
断行处理
  • word-wrap，overflow-wrap
  • 值
    • normal：允许内容定开或溢出指定的边界
    • break-word：内容将在边界内换行
处理空白符
  • white-space 属性会影响到用户代理对源文档中的空格、换行和 tab 字符的处理。
  • 值简介
  1. normal

通过使用该属性，可以影响浏览器处理字之间和文本行之间的空白符的方式。从某种程度上讲，默认的 XHTML 处理已经完成了空白符处理：它会把所有空白符合并为一个空格。所以给定以下标记，它在 Web 浏览器中显示时，各个字之间只会显示一个空格，同时忽略元素中的换行：

<p>This     paragraph has    many
    spaces           in it.</p>

可以用以下声明显式地设置这种默认行为：

p {white-space: normal;}

上面的规则告诉浏览器按照平常的做法去处理：丢掉多余的空白符。如果给定这个值，换行字符（回车）会转换为空格，一行中多个空格的序列也会转换为一个空格。

  1. pre

    不过，如果将 white-space 设置为 pre，受这个属性影响的元素中，空白符的处理就有所不同，其行为就像 XHTML 的 pre 元素一样；空白符不会被忽略。

    如果 white-space 属性的值为 pre，浏览器将会注意额外的空格，甚至回车。在这个方面，而且仅在这个方面，任何元素都可以相当于一个 pre 元素。

  2. nowrap

    与之相对的值是 nowrap，它会防止元素中的文本换行，除非使用了一个 br 元素。在 CSS 中使用 nowrap 非常类似于 HTML 4
    中用<td nowrap> 将一个表单元格设置为不能换行，不过 white-space 值可以应用到任何元素。

  3. pre-wrap和pre-line

    CSS2.1 引入了值 pre-wrap 和 pre-line，这在以前版本的 CSS 中是没有的。这些值的作用是允许创作人员更好地控制空白符处理。

    如果元素的 white-space 设置为 pre-wrap，那么该元素中的文本会保留空白符序列，但是文本行会正常地换行。如果设置为这个值，源文本中的行分隔符以及生成的行分隔符也会保留。pre-line 与 pre-wrap 相反，会像正常文本中一样合并空白符序列，但保留换行符。

CSS字体
字体属性
  • font-family属性
字体风格
  • font-style属性 含有三个值
    1. normal-文本正常显示
    2. italic-文本斜体显示
    3. oblique-文本倾斜显示
字体变形
  • font-varlant属性 可以设定大小写字母
字体加粗
  • font-weight属性
字体大小
  • font-size属性
CSS链接
链接的四种形式
  1. a:link：普通
  2. a:visited：已访问的
  3. hover：鼠标指针位于链接的上方
  4. active：被点击

  • 例子

    a:link {color:#FF0000;}		/* 未被访问的链接 */
a:visited {color:#00FF00;}	/* 已被访问的链接 */
a:hover {color:#FF00FF;}	/* 鼠标指针移动到链接上 */
a:active {color:#0000FF;}	/* 正在被点击的链接 */
CSS列表
列表项目符号
  • list-style-type
图片符号
  • list-style-type
符号位置
  • list-style-position

CSS盒子（BOX）

  • 即盒子模型：盒子即一个矩形的块儿可以对其进行幅面、边框和边距的设置。
  • 必要的三个参数：border（边框）、padding（内边距）、margin（外边距）
  • 对一个盒子模型的解读：
    1. 盒子模型的内部是实际的内容，直接包围内容的内边距，内边距的边缘是边框，边框以外是外边距，外边距默认是透明的
    2. 内边距、边框和外边距都是可选的，默认值是0
    3. border属性设定边框线条样式，内边距和外边距都是相对于边框的设定
    4. 内边距是指border与内容之间的距离，外边距则是指border与合资外其他内容的距离
    5. 三个参数都有上下左右四个方向，每个方向的设置可以相同也可单独设置
盒子大小

  • 盒子所占宽/高=width/height + padding +margin+border

  • 可以用CSS中width和height来定义

  • 基本语法

    width:auto|长度|百分比
height:auto|长度|百分比

  • box-sizing 改变盒子大小的计算方式，属性如下

content-box:标准模式，padding,border,margin不被包含在定义的宽高之内，width进制内容的高度。height类似
border-box:怪异模式，padding和border被包含在定义内width和height之内，此时设定的width指“内容+border+padding”
边框的属性
  1. border-style

  • border-style , border-top-style , border-right-style , border-bottom-style , border-left-style

  • 具体值如下

    关键字 说明
    none 无轮廓
    hidden 隐藏边框
    dotted 点状轮廓
    dashed 虚线轮廓
    solid 实线轮廓
    double 双线轮廓
    groove 3D凹槽轮廓
    ridge 3D凸槽轮廓
    inset 3D凹边轮廓
    outset 3D凸边轮廓
  1. border-width
  • 控制对象的边框宽，同样类似于style，也有四个方向的属性
  • 四个属性只能有一个值
  1. border-color
  • 四个属性
  1. 复合属性

  • 可以同时设置多个属性

  • 语法如下

    border-left:[宽度] [颜色] [样式]

  1. 边框的其他属性

  • border-radius 圆角边框

  • 语法

    1. 分别设置四个角
border-top-left-radius:[水平半径] [垂直半径]
......
2. 同时设置四个角
border-radius[10px 15px/10px 15px]
  1. 图像边框 border-image

  • border-image-source 图像

    属性：

    none

    url：边框图像的路径

  • -slice 切片方式

  • -width 边框厚度

  • -outset 外延扩展

    值不允许为负值

  • -repeat 平铺方式

    border-image-repeat:[stretch|repeat|round|space]

    stretch：指定用拉伸方式来填充

    repeat：平铺方式来填充边框图像，超出会被截断

    round：平铺方式来填充边框图像，图片会根据边框的尺寸动态调整图片的大小到搞好铺满

    space：平铺方式来填充边框图像，根据尺寸动态调整图片之间的间距

盒子阴影

  • box-shadow

  • 语法

    box-shadow:阴影；
阴影 = [inset] 水平偏移量 垂直偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色]

CSS盒子布局和定位

CSS定位属性
  • 为了文档便于阅读，主要通过position来设置
定向偏移属性 top，bottom，right，left

  • 语法

    top:auto|长度|百分比
定位方式 position

  • 语法

    position:static|relative|absolute|fixed|center|page|sticky

  1. static：静态定位，和正常一样

  2. relative：相对定位

    设定元素相对于原来的偏移量，设定为相对定位的元素会偏移某个距离，且保留原来的形状和位置

  3. absolute：绝对定位

    设定元素参照父元素偏移，会从文档流之中删除，原有空间将被删除。

  4. fixed：

    和absolute一致，偏移量以窗口为参考，当出现滚动条时，不会随着滚动，

  5. center：

    和absolute一致，偏移量以祖先元素的中心点参考

  6. page：

    和absolute一致，元素在分页某提或区域块内

  7. sticky：吸附

分层呈现
  • z-index
  • 用于元素的堆叠，值越小，层级越低，越处于下层
裁剪

  • clip

  • 仅针对绝对定位的元素

  • 语法

    clip:rect(10px 15px auto 50px)按照上右下左的顺序

CSS布局属性
可见性

  • visibility

  • 语法

    visibility:visible|hidden|collapse

collapse：主要用来隐藏表格的行或列，隐藏的行或列能被其他内容使用

溢出

  • overflow

  • 值

    visible：不做处理

    hidden：隐藏，不出现滚动条

    scroll：出现滚动条

    auto

显示

  • display

  • 值

    inline：内联元素

    block：块级元素

    list-item：列表项目

    table：块级表格

    run-in：根据上下文对象是块级或是内联

    box：弹性伸缩盒

浮动
  • float
清除
  • clear
  • 令浮动元素不再占用原文档位置
  • 会覆盖其他元素
  • 使用该属性可实现内容环绕效果

猜你喜欢

转载自blog.csdn.net/qq_43271194/article/details/89458318
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
周排行
浏览器对同一域名进行请求的最大并发连接数
React Hook之自定义Hook
【转】MyBatis缓存机制
-Java-泛型
自动化测试常用脚本-发送邮件
LeetCode#859: Buddy Strings
java、Python处理字符串
第二篇の博客
Hadoop伪分布式环境安装
SQL Server进阶（十一）临时表、表变量
每日归档
更多
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022