css基础-阿里云开发者社区

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

css基础

简介: CSS  CSS介绍  导入css  Css选择器  CSS属性  CSS框模型 css介绍 1. css是什么 CSS 指层叠样式表 (Cascading Style Sheets)  样式定义如何显示 HTML 元素  样式通常存储在样式表中  把样式添加到 HTML 4.
+关注继续查看

CSS
 CSS介绍
 导入css
 Css选择器
 CSS属性
 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 属性
例如:

<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的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访问状态,和鼠标悬念状态。
伪类的语法:
selector : pseudo-class {property: value}

CSS 类也可与伪类搭配使用。
selector.class : pseudo-class {property: value}

W3C:”W3C” 列指示出该属性在哪个 CSS 版本中定义(CSS1 还是 CSS2)。

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

css属性

字体
Css字体属性定义文本的字体系列,大小,加粗,风格(如斜体)和变形(如小型大写字母)
常用属性:
 font:简写属性,作用是把所有针对字体的属性设置在一个声明中。
 font-family:定义字体系列
 font-size:定义字体的尺寸
 font-style:定义字体风格

文本
CSS 文本属性可定义文本的外观。通过文本属性,您可以改变文本的颜色、字符间距,对齐文本,装饰文本,对文本进行缩进,等等。
常用属性
 color:定义文本颜色
 text-align:定义文本对齐方式
 letter-spacing:定义字符间隔
 word-spacing:定义字间隔

背景
CSS 允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果。CSS 在这方面的能力远远在 HTML 之上。
常用属性:
 background:简写属性,作用是将背景属性设置在一个声明中
 background-color:定义背景颜色
 background-image:定义背景图片
 background-position:定义背景图片的起始位置
 background-repeat:定义背景图片是否及如何重复。
尺寸
CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。
常用属性:
 width:设置元素的宽度
 height:设置元素的高度
列表
CSS 列表属性允许你放置、改变列表项标志,或者将图像作为列表项标志。
常用属性:
 list-style:简写属性。用于把所有用于列表的属性设置于一个声明中。
 list-style-image:定义列表项标志为图象
 list-style-position:定义列表项标志的位置
 list-style-type:定义列表项标志的类型。
表格
CSS 表格属性可以帮助您极大地改善表格的外观
常用属性:
 border-collapse:定义是否把表格边框合并为单一的边框。
 border-spacing:定义分隔单元格边框的距离
 caption-side:定义表格标题的位置
轮廓
轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
CSS outline 属性规定元素轮廓的样式、颜色和宽度。
常用属性:
 outline:在一个声明中设置所有的轮廓属性
 outline-color:定义轮廓的颜色
 outline-style:定义轮廓的样式
 outline-width:定义轮廓的宽度

定位
CSS 定位 (Positioning) 属性允许你对元素进行定位。
定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置
CSS 有三种基本的定位机制:普通流、浮动和绝对定位。
常用属性:
 position:把元素放置到一个静态的,相对的,绝对的,或固定的位置中。
 top:定义了定位元素的上外边距边界与其包含块上边界之间的偏移量
 right: 定义了定位元素右外边距边界与其包含块右边界之间的偏移
 left: 定义了定位元素左外边距边界与其包含块左边界之间的偏移
 bottom: 定义了定位元素下外边距边界与其包含块下边界之间的偏移。

分类
CSS 分类属性允许你控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常位置来定位元素,使用绝对值来定位元素,以及元素的可见度。
常用属性
 clear:设置一个元素的侧面是否允许其它的浮动元素
 float:定义元素在哪个方向浮动
 cursor:当指向某元素之上时显示的指针类型
 display:定义是否及如何显示元素
 visibility:定义元素是否可见或不可见。

CSS框模型

盒子模型
CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。
这里写图片描述
元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素
边框
元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。
CSS border 属性允许你规定元素边框的样式、宽度和颜色。
常用属性:
 border:简写属性,用于把针对于四个边的属性设置在一个声明。
 border-color:简写属性,定义元素边框中可见部分的颜色,或为四个边分别设置颜色。
 border-style:用于定义所有边框的样式,或者单独为各边设置边框样式。
 border-width:简写属性,用于为元素的所有边框设置宽度,或则单独地为各边边框设置宽度
 border-top:简写属性,用于把上边框的所有属性设置到一个声明中
 border-right:简写属性,用于把右边框所有属性设置到一个声明中
 border-bottom:简写属性,用于把下边框的所有属性设置到一个声明中
 border-left:简写属性,用于把左边框的所有属性设置到一个声明中。

外边距
围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。
设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位、百分数值甚至负值。
常用属性:
 margin:简写属性,在一个声明中设置所有外边距属性
 margin-top:定义元素的上外边距
 margin-right:定义元素的右外边距
 margin-bottom:定义元素的下外边距
 margin-left定义元素的左外边距
注意:在使用margin来定义所有外边距时,可以使用值复制。
 如果缺少左外边距的值,则使用右外边距的值。
 如果缺少下外边距的值,则使用上外边距的值。
 如果缺少右外边距的值,则使用上外边距的值。

内边距
元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性。
CSS padding 属性定义元素边框与元素内容之间的空白区域。
常用属性:
 padding:简写属性,作用是在一个声明中设置元素的所有内边距属性
 padding-top:定义元素的上内边距
 padding-right:定义元素的右内边距
 padding-bottom:定义元素的下内边距
 padding-left:定义元素的左内边距。

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

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10089 0
HTML基础8--CSS、滑动门
滑动门并不是一项全新的技术,它是利用背景图像的可层叠性,并允许他们在彼此之上进行滑动,以创造一些特殊的效果。 CSS Sprites在国内很多人叫CSS精灵,是一种网页图片应用处理方式。
647 0
css基础1
Css(实现了页面和样式的彻底分离) 写入样式表的三种方式: 内联样式表,嵌入样式表,外部样式表。 内联样式表的优先级高于嵌入样式表。嵌入式样式表的优先级大于外部样式表 样式表的选择器(通过选择器帮我们获得页面上要获得样式的元素) 写什么标签就拿到了什么标签。
731 0
【JavaScript框架封装】实现一个类似于JQuery的基础框架、事件框架、CSS框架、属性框架、内容框架、动画框架整体架构的搭建
版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/81055973 ...
874 0
谈谈互联网后端基础设施
本文更新于2016.12.12, 加入了扩展章节 对于一个互联网企业,后端服务是必不可少的一个组成部分。抛开业务应用来说,往下的基础服务设施做到哪些才能够保证业务的稳定可靠、易维护、高可用呢?纵观整个互联网技术体系再结合公司的目前状况,个人认为必不可少或者非常关键的后端基础技术/设施如下图所示: Api网关 业务应用和后端基础框架 缓存、数据库、搜索引擎、消息队列 文件存储 统一认证中心 单点登录系统 统一配置中心 服务治理框架 统一调度中心 统一日志服务 数据基础设施 故障监控 扩展 这里的后端基础设施主要指的是应用在线上稳定运行需要依赖的关键组件/服务等。
1416 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13892 0
CSS 基础点集锦一:盒子模型、浮动、清除浮动
1、盒子模型: 示意图(图片来自w3school): 说明:上图中,由内而外依次是 元素内容(content) 内边矩(padding-top、padding-right、padding- bottom、padding-left) 边框(border-top、border-right、border-bottom、border- left) 外边距(marging-top、margin
1337 0
好程序员web前端分享CSS基础篇
学习目标1、CSS简介2、CSS语法3、样式的创建4、两种引入外部样式表的区别5、样式表的优先级和作用域6、CSS选择器7、选择器的权重8、浮动属性的简单应用9、HTML、CSS注释一、CSS简介css:层叠样式表 英文全名:cascading style sheets,WEB标准中的表现标准语言,表现标准语言在网页中主要对网页信息的显示进行控制,简单说就是如何修饰网页信息的显示样式。
2191 0
CSS 全解析实战(二)-HTML基础强化
1 HTML常见元素和理解(1) HTML 常见元素 viewport 标签适配移动端 HTML 重要属性 2 HTML常见元素和理解(2) 标签的 HTML5新属性 href 规定链接的目标地址 target 规定在何处打开链接文档 表格 label 为 input 元素定义标注(标记)。
866 0
+关注
龙神之怒
让我们一起努力奋斗吧
95
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载