CSS基础语法

css小白一枚。对于css是真心不懂,所以这篇文章也是看着网上的资料,边理解边整理的,受益良多。

1 css样式控制html文件的方式

1.1 内嵌式

CSS一般位于HTML文件的头部,即<head></head>标记内,并且以<style>开始,以</style>结束,例如如下的代码定义了<body>标记使用的字号:

 <style  type="text/css">
     body {
               font-size: 10px;
              }
   </style>

1.2 行内样式

采用<style=" ">的格式把样式写在HTML中的任意行内,“=”右边的属性设置放入双引号中,多个属性用“;”分隔。
例如,下面的样式控制段落文字的字号和颜色:

<div style="font-size: 10pt; color: #FF6600;"></div>

1.3 链接式

CSS的定义既可以在HTML文档内部,也可以单独在外部文件(例如style.css)中定义。把编辑好的CSS文档保存成外部文件,然后在<head>中添加如下所示的代码:

<link  rel="stylesheet"  href="style.css"  type="text/css">

1.4 导入式

导入样式和链接样式的功能基本相同,只是语法和运作方
式上略有区别.
导入的样式表在HTML文件初始化时,会被导入到HTML
文件内,作为文件的一部分,类似内嵌式的效果。
链接式样式表则是在HTML的标记需要格式时才以链接的方式引用。
导如样式表常用格式:

@import url(sheet1.css)
@import url(“sheet1.css”)
@import url(‘sheet1.css’)
@import sheet1.css
@import “sheet1.css”
@import ‘sheet1.css’

Css样式四种嵌入方式优先级
行内样式优先级最高,
其次是采用<link>标记的链接式,
再次是位于<style></style>之间的内嵌式,
最后是@import导入式.

2 css选择器

选择器(selector)是CSS中很重要的概念,所有HTML
语言中的标记都是通过不同的CSS选择器进行控制的。

2.1 标记选择器

一个HTML页面由很多不同标记组成,而CSS标记选择器就是声明哪些标记采用哪种CSS样式。

2.2 类别选择器

所有标记都可通过class属性设置类选择器

例如:

<html>
<head> <title>class选择器</title>
<style type="text/css">
.one{
    color:red;          /* 红色 */
    font-size:18px;  }         /* 文字大小 */
.two{
    color:green;        /* 绿色 */
    font-size:20px; }   /* 文字大小 */
.three{
    color:cyan;           /* 青色 */
    font-size:22px; }   /* 文字大小 */
</style>
</head>
<body>
    <p class="one">class选择器1</p>
    <p class="two">class选择器2</p>
    <p class="three">class选择器3</p>
    <h3 class="two">h3同样适用</h3>
</body>
</html>

显示如下:


2.3 ID选择器

ID选择器的使用方法跟class选择器基本相同,不同之处在于ID选择器只能在HTML页面中使用一次,因此其针对性更强。在HTML的标记中只需要利用id属性,就可以直接调用CSS中的ID选择器,格式如下:

例如:

<html>
<head>
<style type="text/css">
#cuti {font-weight:bold;}
</style>
</head>

<body>
<p id="cuti">这是一行加粗的文本</p>
<p>这是一行普通文本</p>
</body>
</html>

显示如下:

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Boot 参考指南 介绍 转载自:https://www.gitbook.com/book/qbgb...
    毛宇鹏阅读 47,054评论 6 342
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,683评论 1 92
  • 简介 1 . 层叠样式表 (Csacading Style Sheets)2 . 主要用于定义HTMl在浏览器的...
    竞技等级几点叫你你呢阅读 1,612评论 0 0
  • 下午在我司发布会上,舞台灯光非常夺目,坐在暗灯的会场里,我不断在猜想,在这个特别昏暗,彼此的模样都模糊到消失的会场...
    陈蹦迪阅读 4,558评论 0 3
  • *桃雪 *普通人AU *OOC有、手癌有、BUG有 月城雪兔觉得自己是有蛀牙了。 虽然说是觉得一个已经脱离小孩年龄...
    卡士_阅读 2,720评论 0 0