应用 CSS语法

其他 2020-02-10 23:46:16 阅读次数: 0

基本操作语法

CSS 规则由两个主要的部分构成：选择器selector，以及一条或多条声明。
selector{属性1：一个修饰值；…}
下面这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。

h1{color:red;font-size:14px;}

效果如图

记得写引号

提示：如果值为若干单词，则要给值加引号
p {font-family: “sans serif”;}

选择器的分组

如果对几个选择器进行相同部分的修饰可以用：
h1,h2,h3,h4,h5,h6 {
color: green;
}这样，6个标题字体颜色会都为绿色。

派生选择器

派生选择器允许你根据文档的上下文关系来确定某个标签的样式。
css规则：

strong {
     color: red;
     }

h2 {
     color: red;
     }

h2 strong {
     color: blue;
     }

只在对应的h2 标记处为特定的蓝色，其余处的strong均为加粗。

ID选择器

id 选择器以 “#” 来定义。
#red {color:blue;}
#green {color:black;}
id 属性为 red 的 p 元素显示为蓝色，而 id 属性为 green 的 p 元素显示为黑色。
如：

<p id="red">这个段落是蓝色。</p>
<p id="green">这个段落是黑色。</p>

**注意：id 属性只能在每个 HTML 文档中出现一次
ID选择器也可常与派生选择器连用。

CSS 类选择器

类选择器用一个.来表示：
.lo {text-align: center}
则lo类的元素均文字居中。
**注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用

属性选择器

  1. *[元素]{修饰}含这个元素的所有内容进行修饰。
  2. a[ ]对锚修饰，再多加元素进行更具体的修饰。

子代选择器

  • h1 em 选择器可以解释为 “作为 h1 元素后代的任何 em 元素”。
h1 em{color:red;}
< h1>haha< em>啦啦啦<\em><\h1>
  • h1>strong只对比h1低一级的strong进行修饰。
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h1> strong {color:red;}
</style>
</head>

<body>
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
</body>
</html>

h1>strongem>strong时：

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
em> strong {color:red;}
</style>
</head>

<body>
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
</body>
</html>

结果为

CSS 相邻兄弟选择器

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。
如果要增加紧接在 h1 元素后出现的段落的上边距：

h1 + p {margin-top:50px;}

伪类选择器


语法：selector : pseudo-class {property: value}

  1. 锚伪类
    前5个属性，在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。
    a:link {color: #FF0000} * 未访问的链接 *
    a:visited {color: #00FF00} * 已访问的链接 *
    a:hover {color: #FF00FF} * 鼠标移动到链接上 *
    a:active {color: #0000FF} * 选定的链接 *

  2. :frist-child

p:first-child {font-weight: bold;}
li:first-child {text-transform:uppercase;}

只修饰p标签的第一个和li标签的第一个。

伪元素

常见的CSS选择器：
css

通配符选择器

*+{}为全文修饰。

*{color：green；}

即可让全文本变绿。

类选择器

为了将类选择器的样式与元素关联，必须将 class 指定为一个适当的值。

    .important{color:red;}
    < p class="important">haha< /p>
    < h1  class="important">haha< /h1>

则受标记过的p,h1均文本变红。也可与元素选择器连用:h1.important就只是对h1的修饰。

继承问题

通过 CSS 继承，子元素将继承最高级元素（在本例中是 body）所拥有的属性（这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd）。不需要另外的规则，所有 body 的子元素都应该显示 Verdana 字体，子元素的子元素也一样。如果你想对某个（p）独立不同的描述，需要创建一个针对 p 的特殊规则，这样它就会摆脱父元素的规则。

如何创建CSS

如何插入样式表，方法有三种：

  1. 外部样式
    当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 < link> 标签链接到样式表。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

系统会应用名为mystyle.css该文件所编写的样式，该文件不能包含任何html的标签。还有不要在属性值和单位值之间留有空格，有的会识别不出来。如：

hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}

假如在20与px之间留有空格，有的会识别不出来。

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

包含在html文件里。

  1. 内联样式
    Style 属性可以包含任何 CSS 属性，你可以在相关标签内使用“style”属性。
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>

多重样式

在外部样式与内部样式修饰的属性有重叠部分，系统会保留内部样式

CSS背景

这方面，大家用css要比html直接变化背景强太多。

  • 背景色（background—color）

可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。
如果您希望背景色从元素中的文本向外少有延伸，只需增加一些内边距padding：

p {background-color: gray; padding: 20px;}

background-color 不能继承，其默认值是 transparent。transparent 有“透明”之意。也就是说，如果一个元素没有指定背景色，那么背景就是透明的，这样其祖先元素的背景才能可见。

  • 背景图像（background-image）
    如果需要设置一个背景图像，必须为这个属性设置一个 URL 值：
    body {background-image: url(/i/eg_bg_04.gif);}
  • 背景重复
    如果需要在页面上对背景图像进行平铺，可以使用 background-repeat 属性。
    属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复。如：
<html>
<head>

<style type="text/css">
body
{ 
background-image: 
url(/i/eg_bg_03.gif);
background-repeat: repeat-y
}
</style>

</head>

<body>
</body>
</html>

repeat-y垂直平铺，repeat-x为水平平铺。

  • 背景定位
    可以利用 background-position 属性改变图像在背景中的位置，长度。常用的为;
    描述

  • 背景关联

如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。
您可以通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响。

<html>
<head>
<style type="text/css">
body 
{
background-image:url(ct_css_selector.gif);
background-repeat:no-repeat;
background-attachment:scroll
}
</style>
</head>

<body>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
</body>

</html>

效果为：
上下拖动图片不跟着移动

总结：

CSS文本

CSS 文本属性可定义文本的外观。
通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。

  • 缩进文本
    CSS 提供了 text-indent 属性，该属性可以方便地实现文本缩进。常用的是首行缩进，如：
    p {text-indent: 5em;}
  • 水平对齐
    text-align 是一个基本的属性，它会影响一个元素中的文本行互相之间的对齐方式。
  • 字间隔
    word-spacing 属性可以改变字（单词）之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。
    word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值，那么字之间的间隔就会增加。为 word-spacing 设置一个负值，会把它拉近。
  • 字符转换
    text-transform 属性处理文本的大小写。这个属性有 4 个值：
    none
    uppercase
    lowercase
    capitalize
    默认值 none 对文本不做任何改动，将使用源文档中的原有大小写。顾名思义，uppercase 和 lowercase 将文本转换为全大写和全小写字符。最后，capitalize 只对每个单词的首字母大写。
  • 文本修饰
    text-decoration：产生删除线，下划线，上标线等效果。
  • 处理空白符

总结

空格符，换行符一般默认会被合并，设置不同的值，得到的属性也不相同。

CSS字体

使用 font-family 属性 定义文本的字体系列。

  • 指定字体系列
    body {font-family: sans-serif;}
  • 使用字体
    h1 {font-family: Georgia;}因为字体的使用有继承效果。
  • 使用引号
    当字体类型为带空格的字体时，选择单引号。如果字体名包括 # 或 $ 之类的符号，才需要在 font-family 声明中加引号。
    < p style=“font-family: Times, TimesNR, ‘New Century Schoolbook’, Georgia,
    ‘New York’, serif;”>…< /p>
  • 字体类型
    常见的为：
    - normal - 文本正常显示
    - italic - 文本斜体显示
    - oblique - 文本倾斜显示
  • 字体大小
    font-size：如果您没有规定字体大小，普通文本（比如段落）的默认大小是 16 像素 (16px=1em)。
    总结

CSS链接

  • 设置链接的样式
    - a:link 未被访问
    - a:visited 已被访问
    - a:hover - 鼠标指针位于链接的上方
    - a:active - 链接被点击的时刻
<!DOCTYPE html>
<html>
<head>
<style>
a:link {color:#FF0000;}    /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;}   /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;}  /* 正在被点击的链接 */
</style>
</head>

<body>
<p><b><a href="/index.html" target="_blank">这是一个链接</a></b></p>
<p><b>注释：</b>为了使定义生效，a:hover 必须位于 a:link 和 a:visited 之后！！</p>
<p><b>注释：</b>为了使定义生效，a:active 必须位于 a:hover 之后！！</p>
</body>
</html>
  • CSS列表
  • CSS表格

CSS轮廓

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
p
{
border: red solid thin;
}
p.dotted {outline-style: dotted}
p.dashed {outline-style: dashed}
p.solid {outline-style: solid}
p.double {outline-style: double}
p.groove {outline-style: groove}
p.ridge {outline-style: ridge}
p.inset {outline-style: inset}
p.outset {outline-style: outset}
</style>
</head>
<body>
<p class="dotted">A dotted outline</p>
<p class="dashed">A dashed outline</p>
<p class="solid">A solid outline</p>
<p class="double">A double outline</p>
<p class="groove">A groove outline</p>
<p class="ridge">A ridge outline</p>
<p class="inset">An inset outline</p>
<p class="outset">An outset outline</p>
<p><b>注释：</b>只有在规定了 !DOCTYPE 时，Internet Explorer 8 （以及更高版本） 才支持 outline-style 属性。</p>
</body>
</html>

CSS框模型

大概

  • 内边距（padding）
    内边距修饰
  • 边框（border）
    边框修饰
  • 外边距（margin）
    外边距修饰

CSS定位

CSS 定位 (Positioning) 属性允许你对元素进行定位。

  • 定位与浮动
    CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。
  • 一切皆为框
    div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。可以使用display元素，display：block可以使行内元素表现得像块；display：none让生成的元素根本没有框。
  • CSS 定位机制
    CSS 有三种基本的定位机制：普通流、浮动和绝对定位。默认都在普通流上进行。
  • CSS position 属性
    通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。
    1.static：
    元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
    2.relative（相对定位）
    元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
    相对定位
    3.absolute（绝对定位）

绝对定位
ps:相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素
4.fixed（固定定位）
实例

相对定位：

<html>
<head>
<style type="text/css">
h2.pos_left
{
position:relative;
left:-20px
}
h2.pos_right
{
position:relative;
left:20px
}
</style>
</head>

<body>
<h2>这是位于正常位置的标题</h2>
<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
<p>相对定位会按照元素的原始位置对该元素进行移动。</p>
<p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p>
<p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>
</body>

</html>

绝对定位：

<html>
<head>
<style type="text/css">
h2.pos_abs
{
position:absolute;
left:100px;
top:150px
}
</style>
</head>

<body>
<h2 class="pos_abs">这是带有绝对定位的标题</h2>
<p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。</p>
</body>

</html>

固定定位：

<html>
<head>
<style type="text/css">
p.one
{
position:fixed;
left:5px;
top:5px;
}
p.two
{
position:fixed;
top:30px;
right:5px;
}
</style>
</head>
<body>

<p class="one">一些文本。</p>
<p class="two">更多的文本。</p>

</body>
</html>
  • 浮动
    如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。
    如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。
    overflow
    再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。
    如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：
    实例
<html>
<head>
<style type="text/css">
div.container
{
width:100%;
margin:0px;
border:1px solid gray;
line-height:150%;
}
div.header,div.footer
{
padding:0.5em;
color:white;
background-color:gray;
clear:left;
}
h1.header
{
padding:0;
margin:0;
}
div.left
{
float:left;
width:160px;
margin:0;
padding:1em;
}
div.content
{
margin-left:190px;
border-left:1px solid gray;
padding:1em;
}
</style>
</head>
<body>

<div class="container">

<div class="header"><h1 class="header">Aliyun.com.cn</h1></div>

<div class="left"><p>"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)</p></div>

<div class="content">
<h2>Free Web Building Tutorials</h2>
<p>At Aliyuncom.cn you will find all the Web-building tutorials you need,
from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p>
<p>W3School.com.cn - The Largest Web Developers Site On The Net!</p></div>

<div class="footer">Copyright 2008 by YingKe Investment.</div>
</div>

</body>
</html>
  • 剪切图像
    clip 属性剪裁绝对定位元素。
    clip
    vertical-align 属性设置元素的垂直对齐方式。
    verticial-align
  • z-index
    z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
    可能的值为1，-1，-1时元素含有最低的优先级；1优先级最高。

padding

  • CSS float 属性
    元素的左右移动。

  • 边框和清理clear
    clear
    浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。因此，创建浮动框可以使文本围绕图像

Old urchin
发布了13 篇原创文章 · 获赞 2 · 访问量 431
私信 关注

猜你喜欢

转载自blog.csdn.net/qq_44605933/article/details/98062448
今日推荐
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
周排行
[编程题]学英语
[codeforces 1288A] Deadline 约数+模
Python的web开发
Docker在Centos 7上的部署
python编码
解决Ubuntu16.04 fatal error: json/json.h: No such file or directory
mysql并发插入
rest接口如何适应jsonp的方案
linux 终端上网设置
高数——等号两边同时求导、积分的解释
每日归档
更多
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022