css基础(精英版)-阿里云开发者社区

开发者社区> 龙神之怒> 正文

css基础(精英版)

简介: css介绍 css是什么 css作用 css书写规则 基本语法 导入css 内联样式表 内部样式表 外部样式表 import导入 css选择器 id选择器 类选择器 元素选择器 伪类 2文本属性 3背景属性 注意 CSS 背景属性 列表属性 尺寸属...
+关注继续查看

css介绍


1. css是什么

CSS 指层叠样式表 (Cascading Style Sheets)

  • 样式定义如何显示 HTML 元素

  • 样式通常存储在样式表中

  • 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题

  • 外部样式表可以极大提高工作效率

  • 外部样式表通常存储在 CSS 文件中

  • 多个样式定义可层叠为一

2.css作用

  • 样式表解决了html的内容与表现分离

  • 使用样式表极大的提高了工作效率。

3.css书写规则

基本语法 ###

Css规则主要由两部分组成
  1.选择器
  2.一条或多条声明
  选择器作用:是为了确定需要改变样式的HTML元素
  声明:每一条声明由一个属性和一个值组成,使用花括号来包围声明,属性与值之间使用冒号(:)分开
这里写图片描述
值的单位
这里写图片描述
颜色
这里写图片描述

书写注意事项
1. 如果值为若干单词,则要给值加引号
2. 多个声明之间使用分号(;)分开
3. css对大小写不敏感,如果涉及到与html文档一起使用时,class与id名称对大小写敏感

导入css


我们介绍以下几种导入css方式:

内联样式表

要使用内联样式,你需要在相关的标签内使用样式(style)属性。Style 属性可以包含任何 CSS 属性
例如:

<div style=”border:1px solid black”>这是一个DIV</div> 

  注意:慎用这种方式,它将内容与显示混合在一起,损失了样式表的优势。一般情况下,这种方式只有在一个标签上只应用一次样式时才会使用

内部样式表

我们可以使用<style>标签在html文档的<head>中来定义样式表。

<html>
<head>
    <style type="text/css">
        hr{color:red}
    </style>
</head>
<body>
    <hr/>
    <div style="border:1px solid black">这是一个div</div>
</html>

这种方式,样式只适合应用于一个页面

外部样式表

如果想要在多个页面使用同一个样式表,可以使用外部样式表来导入。
我们可以在html页面上使用<link>标签来导入外部样式表。
例如:

<html>
<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
    <hr/>
    <div>这是一个div</div>
</html>

浏览器会从mystyle.css文件中读取样式,并对页面上的html进行修饰。
外部样式表,应该以css为后缀来保存,可以使用任意文本编辑器对css文件进行编辑。
下面是mystyle.css文件的内容:

hr{color:red}
div{border:1px solid black}

@import导入

  这种方式也是外部导入
使用方式如下:

<html>
<head>
    <link type="text/css" @import "mystyle.css">
</head>
<body>
    <hr/>
    <div style="border:1px solid black">这是一个div</div>
</html>

关于@import引用外部样式表的区别:
  1.@import这种方式只有firefox支持,而ie不支持。
  2.@import这种方式导入的css,会在整个页面加载后,才会加载样式。如果网络不好情况下,会先看到无样式修饰的页面,闪烁一下后,才会看到有样式修饰的页面。
而使用外部样式表,会先装载样式表,这样看到的就是有样式修饰的页面。
  3.@import不支持通过javascript修改样式,而link支持。

优先级问题
   内联样式表>内部样式表>外部样式表

css选择器


  css选择器主要是用于选择需要添加样式的html元素。

  对于css来说,它的选择器有很多,我们主要介绍以下几种:

id选择器

  Id选择器使用#引入,它引用的是id属性中的值。

  首先,ID 选择器前面有一个 # 号 - 也称为棋盘号或井号。

请看下面的规则:

*#intro {font-weight:bold;}

   与类选择器一样,ID 选择器中可以忽略通配选择器。前面的例子也可以写作:

#intro {font-weight:bold;}/** 这个选择器的效果将是一样的。

  第二个区别是 ID 选择器不引用 class 属性的值,毫无疑问,它要引用 id 属性中的值。

以下是一个实际 ID 选择器的例子:

<p id="intro">This is a paragraph of introduction.</p>

类选择器

  类选择器使用时,需要在类名前加一个点号(.)
  该选择器可以单独使用,也可以与其他元素结合使用。
  提示:
   只有适当地标记文档后,才能使用这些选择器,所以使用这两种选择器通常需要先做一些构想和计划。

<h1 class="important">
This heading is very important.
</h1>

<p class="important">
This paragraph is very important.
</p>

  要应用样式而不考虑具体设计的元素,最常用的方法就是使用类选择器。

元素选择器

   这是最常见的选择器,简单说,文档中的元素就是选择器
   如果设置 HTML 的样式,选择器通常将是某个 HTML 元素,比如 p、h1、em、a,甚至可以是 html 本身:

html {color:black;}
h1 {color:blue;}
h2 {color:silver;}

属性选择器
   如果需要选择有某个属性的元素,而不论属性是什么,可以使用属性选择器
如果您希望把包含标题(title)的所有元素变为红色,可以写作:

  *[title] {color:red;}

  例子 2
  与上面类似,可以只对有 href 属性的锚(a 元素)应用样式:

 * a[href] {color:red;}*

  例子 3
  还可以根据多个属性进行选择,只需将属性选择器链接在一起即可。

  例如,为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色,可以这样写:

a[href][title] {color:red;}

  例子 4
  可以采用一些创造性的方法使用这个特性。

  例如,可以对所有带有 alt 属性的图像应用样式,从而突出显示这些有效的图像:

  img[alt] {border: 5px solid red;}

  提示:
   上面这个特例更适合用来诊断而不是设计,即用来确定图像是否确实有效。

  例子 5:为 XML 文档使用属性选择器
   属性选择器在 XML 文档中相当有用,因为 XML 语言主张要针对元素和属性的用途指定元素名和属性名。

  假设我们为描述太阳系行星设计了一个 XML 文档。如果我们想选择有 moons 属性的所有 planet 元素,使之显示为红色,以便能更关注有 moons 的行星,就可以这样写:

  planet[moons] {color:red;}

  这会让以下标记片段中的第二个和第三个元素的文本显示为红色,但第一个元素的文本不是红色:

<planet>Venus</planet>
<planet moons="1">Earth</planet>
<planet moons="2">Mars</planet>

伪类

css伪类用于向某些选择器添加特殊效果。
下面我们介绍一下锚伪类。
  在支持css的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访问状态,和鼠标悬念状态。
伪类的语法:

属性 描述
:active 向被激活的元素添加样式。
:focus 向拥有键盘输入焦点的元素添加样式。
:hover 当鼠标悬浮在元素上方时,向元素添加样式。
:link 向未被访问的链接添加样式。
:visited 向已被访问的链接添加样式。
:first-child 向元素的第一个子元素添加样式。

2、文本属性

  • color:颜色
  • line-height:行高
  • text-decoration :文本装饰

    属性值

    - none
    - underline 会对元素加下划线
    - overline
    - line-through
    - blink


属性值:none underline
  • text-align:对齐方式
    属性值:left center right
    <div>hello css!!!</div>
    <a href="#">click me!!!</a>
    <style type="text/css">
        div{color:red;text-decoration: underline;text-align: right }
        a{text-decoration: none;}
    </style>
  • text-indent:文本缩进

所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值。

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

3、背景属性

  • background:简写属性

    属性值: 颜色 url 平铺方式 移动位置(left top)

  • background-color:背景颜色

  • background-image:背景图片

    属性值:url(“图片地址”);

  • background-repeat:平铺方式

    属性值:默认横向纵向平铺

    1. repeat:横向纵向平铺
    2. no-repeat:不平铺
    3. repeat-y:纵向
    4. repeat-x:横向

      body{
      background-color: black;
      background-image: url(“images/dog.gif”);
      background-repeat: repeat-y;
      }

注意:

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

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

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

CSS 背景属性

属性 描述

  • background       简写属性,作用是将背景属性设置在一个声明中。
  • background-attachment  背景图像是否固定或者随着页面的其余部分滚动。
  • background-color     设置元素的背景颜色。
  • background-image    把图像设置为背景。
  • background-position   设置背景图像的起始位置。
  • background-repeat   设置背景图像是否及如何重复。

列表属性

  • list-style-type:列表项前的小标志

      属性值:太多了

无序列表时:

none: 无标记

disc:实心圆,为默认的

circle:空心圆

square:实心方块

有序列表时

none: 无标记
decimal:数字(1,2,3)默认

lower-roman:小写罗马数字

upper-roman:大写罗马数字

  • list-style-image:列表项前的小图片

属性值:url(“图片地址”);

            <ul>
                <li>程序员</li>
                <li>程序员</li>
                <li>程序员</li>
                <li>程序员</li>
            </ul>
            <style type="text/css">
                /* ul{list-style-type: decimal-leading-zero;} */
                ul{list-style-image: url("images/forward.gif");}
            </style>

尺寸属性

  • width:宽度
  • height:高度

表格属性

  • border-collapse :折叠边框

    属性设置是否将表格边框折叠为单一边框

  • text-align 和 vertical-align 属性设置表格中文本的对齐方式。

    text-align 属性设置水平对齐方式,比如左对齐、右对齐或者居中:

    vertical-align 属性设置垂直对齐方式,比如顶部对齐、底部对齐或居中对齐

CSS Table 属性

属性 描述
border-collapse 设置是否把表格边框合并为单一的边框。
border-spacing 设置分隔单元格边框的距离。
caption-side 设置表格标题的位置。
empty-cells 设置是否显示表格中的空单元格。
table-layout 设置显示单元、行和列的算法。

鼠标属性(cursor)

cursor属性定义了鼠标指针的放在一个元素边界范围内时所用的光标形状

属性值

  • default
  • pointer
  • crosshair
  • text
  • wait
  • help等

显示属性

  • display:

属性值:

  1. none:隐藏
  2. block:块级显示
  3. inline:行级显示
            <form action="">
                name:<input id="name" type="text" /><span id="span">对不起 输入不符合要求</span>
                <br>
                pass:<input id="pass" type="password" />
                <br>
                <input id="btn" type="button" value="button" />
            </form>
            <style type="text/css">
                span{color:red;display: none}
            </style>
            <script type="text/javascript">
                document.getElementById("btn").onclick = function(){
                    document.getElementById("span").style.display = "inline";
                };
            </script>

轮廓

轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
CSS outline 属性规定元素轮廓的样式、颜色和宽度。
常用属性:

  1. outline:在一个声明中设置所有的轮廓属性
  2. outline-color:定义轮廓的颜色
  3. outline-style:定义轮廓的样式
  4. outline-width:定义轮廓的宽度

盒子模型

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。

这里写图片描述
元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素

边框

元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。
CSS border 属性允许你规定元素边框的样式、宽度和颜色。
常用属性:

  1. border:简写属性,用于把针对于四个边的属性设置在一个声明。
  2. border-color:简写属性,定义元素边框中可见部分的颜色,或为四个边分别设置颜色。
  3. border-style:用于定义所有边框的样式,或者单独为各边设置边框样式。
  4. border-width:简写属性,用于为元素的所有边框设置宽度,或则单独地为各边边框设置宽度
  5. border-top:简写属性,用于把上边框的所有属性设置到一个声明中
  6. border-right:简写属性,用于把右边框所有属性设置到一个声明中
  7. border-bottom:简写属性,用于把下边框的所有属性设置到一个声明中
  8. border-left:简写属性,用于把左边框的所有属性设置到一个声明中。

外边距

围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。
设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位、百分数值甚至负值。
常用属性:

  1. margin:简写属性,在一个声明中设置所有外边距属性
  2. margin-top:定义元素的上外边距
  3. margin-right:定义元素的右外边距
  4. margin-bottom:定义元素的下外边距
  5. margin-left定义元素的左外边距
    注意:在使用margin来定义所有外边距时,可以使用值复制。
  6. 如果缺少左外边距的值,则使用右外边距的值。
  7. 如果缺少下外边距的值,则使用上外边距的值。
  8. 如果缺少右外边距的值,则使用上外边距的值。

内边距

元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性。
CSS padding 属性定义元素边框与元素内容之间的空白区域。
常用属性:

  1. padding:简写属性,作用是在一个声明中设置元素的所有内边距属性
  2. padding-top:定义元素的上内边距
  3. padding-right:定义元素的右内边距
  4. padding-bottom:定义元素的下内边距
  5. padding-left:定义元素的左内边距。

定位

CSS 定位 (Positioning) 属性允许你对元素进行定位。
定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置
CSS 有三种基本的定位机制:普通流、浮动和绝对定位。
常用属性:

  1. position:把元素放置到一个静态的,相对的,绝对的,或固定的位置中。
  2. top:定义了定位元素的上外边距边界与其包含块上边界之间的偏移量
  3. right: 定义了定位元素右外边距边界与其包含块右边界之间的偏移
  4. left: 定义了定位元素左外边距边界与其包含块左边界之间的偏移
  5. bottom: 定义了定位元素下外边距边界与其包含块下边界之间的偏移。

浮动属性

float:
属性值:

  1. left
  2. right
  3. clear:清除浮动 left right both

缺点 :

  • (1)影响相邻元素不能正常显示
  • (2)影响父元素不能正常显示

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10076 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
10883 0
css基础1
Css(实现了页面和样式的彻底分离) 写入样式表的三种方式: 内联样式表,嵌入样式表,外部样式表。 内联样式表的优先级高于嵌入样式表。嵌入式样式表的优先级大于外部样式表 样式表的选择器(通过选择器帮我们获得页面上要获得样式的元素) 写什么标签就拿到了什么标签。
728 0
谈谈互联网后端基础设施
本文更新于2016.12.12, 加入了扩展章节 对于一个互联网企业,后端服务是必不可少的一个组成部分。抛开业务应用来说,往下的基础服务设施做到哪些才能够保证业务的稳定可靠、易维护、高可用呢?纵观整个互联网技术体系再结合公司的目前状况,个人认为必不可少或者非常关键的后端基础技术/设施如下图所示: Api网关 业务应用和后端基础框架 缓存、数据库、搜索引擎、消息队列 文件存储 统一认证中心 单点登录系统 统一配置中心 服务治理框架 统一调度中心 统一日志服务 数据基础设施 故障监控 扩展 这里的后端基础设施主要指的是应用在线上稳定运行需要依赖的关键组件/服务等。
1413 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13884 0
css基础小知识笔记
1\css规定的定位基值有三种:标准文档流、浮动及定位 2、w3c标准:万维网制定的一系列标准。{ 结构化标准语言(HTML、XML) 表现标准语言(css) 行为标准语言(DOM,ECMAScript) } 倡导结构,样式,行为分离 3、样式就近原则...
950 0
CSS 全解析实战(二)-HTML基础强化
1 HTML常见元素和理解(1) HTML 常见元素 viewport 标签适配移动端 HTML 重要属性 2 HTML常见元素和理解(2) 标签的 HTML5新属性 href 规定链接的目标地址 target 规定在何处打开链接文档 表格 label 为 input 元素定义标注(标记)。
866 0
+关注
龙神之怒
让我们一起努力奋斗吧
95
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载