1.设置背景颜色：background-color

例：background-color:#d0e4fe;或background-color:blue;

2.字体颜色·：color

例：color:red;

3.对齐方式：text-align

例：text-align:right;            //右对齐

4.字体样式：font-family

例：font-family:"楷体";

5.字体大小：font-size

例：font-size:50px;

6.左外边距/右外边距：margin-left/margin-right

例：margin-left:50px;

7.CSS注释以 /* 开始, 以 */ 结束.

8.id选择器可以为标有特定 id 的 HTML 元素指定特定的样式，以 "#" 来定义。

注：ID属性不能以数字开头

例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS id</title>
<style>
body{
background-color:pink;
}
#id1
{
text-align:center;
color:blue;
}
</style>
</head>

<body>
<p id="id1">Hello World!</p>
<p>这个段落不受该样式的影响。</p>
</body>
</html>

运行结果：

9.class 选择器用于描述一组元素的样式，在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示。

class 选择器有别于id选择器，class可以在多个元素中使用。

例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>class选择器</title>
<style>
body{
background-color:pink;
}
.center
{
text-align:center;
font-family:楷体;
font-size:25px;
color:blue;
}
</style>
</head>

<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p>
</body>
</html>

运行截图：

可以指定特定的HTML元素使用class选择器，未被指定的html元素使用该class选择器不起作用。

例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>class选择器</title>
<style>
body{
background-color:pink;
}
p.center
{
text-align:center;
font-family:楷体;
font-size:25px;
color:blue;
}
</style>
</head>

<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p>
</body>
</html>

运行截图：

10.插入外部样式表

使用 <link> 标签链接到样式表，<link rel="stylesheet" type="text/css" href="Test1.css">

浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。

外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。

例：

Test1.css:

@charset "UTF-8";
body{
background-image:url('https://static.runoob.com/images/mix/paper.gif');     //设置图片背景
}
.p{
font-family: 楷体;
font-size: 25px;
text-align:center;
}

Test1.html:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>class选择器</title>
<link rel="stylesheet" type="text/css" href="Test1.css">
</head>
<body>
<h1 class="center">标题居中</h1>
<p class="p">段落居中。</p>
</body>
</html>

运行截图：

CSS基础学习（一）的更多相关文章

  1. HTML&CSS基础学习笔记—创建列表

    创建一张表格 很多时候我们需要在网页上展示一些数据,使用表格可以很好的来展示数据. 在HTML中<table>标签定义 表格. <table> </table> 添 ...

  2. CSS基础学习笔记

    一. CSS介绍 1. CSS概述:CSS(Cascading Style Sheets)指层叠样式表,极大提高了工作效率. 2. 基础语法: 属性大于1个之后,属性之间用分号隔开 如果大于1个单词, ...

  3. css基础学习

    css(Cascading style sheets):层叠样式表 1.图片替换技术 以下代码表示:点击百度logo的图片就会跳转到百度首页. <style > .baidu{ /*宽高定 ...

  4. HTML&CSS基础学习笔记1.33-元素选择器

    元素选择器 最常见的 CSS 选择器是元素选择器.换句话说,文档的元素就是最基本的选择器: p { text-indent:10px; color:blue; } 什么情况下使用元素选择器,一般我们这 ...

  5. HTML&CSS基础学习笔记1.32-选择器是什么

    选择器是什么 选择器是CSS样式为了定位页面上的任意元素的一种方法. 选择器主要分为:元素标签选择器.通用选择器.类选择器.ID选择器.属性选择器.组合选择器.伪类选择器.伪元素选择器. 先做个了解, ...

  6. HTML&CSS基础学习笔记1.31-像素和相对长度

    像素和相对长度 之前的笔记中,我们提到过用属性width.height来设置图片的尺寸,它们的单元都是”px(像素)”.长度单位总结一下,目前比较常用到px(像素).em.% 百分比,要注意其实这三种 ...

  7. HTML&CSS基础学习笔记1.30-颜色的表达

    颜色的表述 在网页中的颜色设置是非常重要,CSS的属性有字体颜色(color).背景颜色(background-color).边框颜色(border)等,设置颜色的方法也有很多种: 1.英文命令颜色 ...

  8. HTML&CSS基础学习笔记1.29-灵活地使用样式

    灵活的使用样式 使用样式的感觉很棒吧! 刚我们使用的内联样式是给具体的标签加上样式,如果有多个标签的时候,我们用内联样式给标签加样式的时候就需要一个个的加过来,这样就很麻烦. 而如果我们使用内部样式表 ...

  9. HTML&CSS基础学习笔记1.28-给网页添加一个css样式

    CSS是什么? 当HTML配合CSS一起使用时,我们发现页面变得好看了很多.那么CSS到底是什么呢? CSS指层叠样式表 (Cascading Style Sheets),它主要是用于定义HTML标签 ...

  10. less.css基础学习，陆续更新中

    //基础//概念:动态样式语言,有很多语言的特性:变量,函数,运算等 //变量:通过一个简单的@+字母,数字下划线等,但不能以数字开头,不能关键字,保留字等//注意less.css是全局变量,除在函数 ...

随机推荐

  1. 转Gerber和拼版

    1 Gerber 这个网上有现成的教程:(不要写网上能找到的资料-敏捷开发) AD 导出Gerber :https://jingyan.baidu.com/article/3c48dd3494181c ...

  2. CSS:两端对齐原理(text-align:justify)

    我是一个小白我是一个小白我是一个小白喷我吧,哈哈 写样式的是时候经常会碰到字体两端对齐的效果,一般就网上找端css样式复制下就结束了,没有考虑过原理是啥贴下代码 <head> <me ...

  3. webpack+vue-cli+ElementUI+vue-resource 前端开发

    线上商城项目(电脑0环境)1.安装node.js (参考http://www.runoob.com/nodejs/nodejs-install-setup.html): 2.安装 webpack (全 ...

  4. leetcode 1962. 移除石子使总数最小

    题目描述: 给你一个整数数组 piles ,数组 下标从 0 开始 ,其中 piles[i] 表示第 i 堆石子中的石子数量.另给你一个整数 k ,请你执行下述操作 恰好 k 次: 选出任一石子堆 p ...

  5. 【uniapp 开发】UniPush

    App.vue export default { onLaunch: function() { // #ifdef APP-PLUS const _self = this; const _handle ...

  6. java中封装encapsulate的概念

    封装encapsulate的概念:就是把一部分属性和方法非公有化,从而控制谁可以访问他们. https://blog.csdn.net/qq_44639795/article/details/1018 ...

  7. Python入门-字符串格式化

    一.不推荐使用:%号 #正常按照位置传递参数 print('%s asked %s to do something' % ('egon', 'lili')) #先后顺序不能乱 #字典传递参数 prin ...

  8. Java中的List接口实现类LinkedList

    package collection; import java.util.LinkedList; /* * 1.implement List接口 * 2.底层是一个链表结构:查询慢,增删快 * 注意: ...

  9. 宝藏考研公众号，考研up篇（参考）

    每当刷完题感觉到累了,看完网课觉得倦了,拿起手机看一下我推荐的宝藏公众号和up推送的文章和视频(｡･ω･｡)ﾉ♡,这样既可以换换口味解解腻,又可以不断的提升自己,岂不美哉?让别人以为你拿起手机开始摆烂 ...

  10. Twitter上怎么保存视频的教程来啦

    玩了多年的推特, 我发现竟然有这么便捷的方法把推特上的视频给保存下来 如果你也需要的话那么我来告诉你怎么操作吧~ Twitter(通称推特)是一家美国社交网络及微博客服务的网站 是全球互联网上访问量最 ...