网页的三大基石：

1.HTML：结构

2.CSS：美化

3.JavaScript:动态

1.认识CSS样式
CSS全称为"层叠样式表(Cascading Style Sheets)"主要用以定义html内容在浏览器内的显示样式。

2.CSS代码语法
CSS样式有选择符(选择器)和声明组成,而声明又有属性和值组成。如下：
p{color:blue}

3.CSS注释代码
/* 代码注释 */||//

4.CSS样式的位置及相关的优先级
    4.1 内联式CSS样式：直接写在现有的html标签中
    4.2 嵌入式CSS样式：写在当前的文件中，一般位于head标签内
    4.3 外部式CSS样式：写在单独的一个文件中（.css）<link>标签引入
    4.4 三种方式的优先级：内联式>嵌入式>外部式

5.CSS选择器
5.1 什么是选择器？
每一条css样式定义由两部分组成，形式如下：
选择器{样式;}

5.2 标签选择器、类选择器、ID选择器（最常用的三种选择器）
   标签选择器：标签{}
   类选择器：.class{}
   id选择器：#id{} 同一个网页中只允许一个id

5.3 其它选择器：子选择器（>），包含（后代选择器）(空格)
通用选择器（*）、伪类选择器(a:hover)、分组选择器(标签,标签)

6.CSS格式化排版
    6.1 文字排版--字体 font-family 宋体、微软雅黑
    6.2 文字排版--字号、颜色   font-size   color
    6.3 文字排版--粗体 font-weight
    6.4 文字排版--斜体 font-style
    6.5 文字排版--下划线 text-decoration:underline
    6.6 文字排版--删除线 text-decoration:line-through
    6.7 文字排版--缩进 text-indent:2em    em代表文字的2倍大小
    6.8 文字排版--行间距(行高) line-height
    6.9 文字排版--中文字间距、字母间距 letter-spacing
    6.10 文字排版--对齐 text-align

7.CSS背景（background）
    background （缩写形式）
    background-color（背景色）
    background-image（背景图）
    background-repeat（背景图重复方式）
    background-position（位置坐标、偏移量）

8.CSS列表（ul、ol）
list-style
list-style-image

9.盒模型
    9.1 元素分类
    在布局前，了解：html标签元素分为三种类型：块状元素、内联元素(又叫行内元素)、内联块状元素。display属性设置

    9.2 常用的块状元素有：独占一行，元素的高度、宽度、行高以及顶和底边距都可设置
    <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

9.3 常用的内联元素有：和其他元素都在一行上，元素的高度、宽度及顶部和底部边距不可设置
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

9.4 常用的内联块状元素有：和其他元素都在一行上，元素的高度、宽度、行高以及顶和底边距都可设置
<img>、<input>

9.5 什么盒子模型？（月饼例子）块状元素都具有盒子模型的特定
由margin、padding、border、content组成

CSS的使用：

1.CSS的基本使用


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><!-- 嵌入式css样式设置 --><style type="text/css">/*import导入css文件*/@import url("css/importStyle.css");h1{color: red;}</style><!-- 外部式引入 --><link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body><!-- CSS:层叠式样式表作用：美化HTML标签。HTML标签自带的属性很少，不能达到我们用户的需求，借助css来完成。在已有的HTML页面中如何引入css样式代码4种方式(1)行内式样式引入利用HTML自带的style属性来实现行内式样式css引入style属性中调用css样式的语法属性名:属性值;属性名:属性值;属性名:属性值;属性名:属性值;(2)嵌入式样式引入必须在head标签中编写style标签借助css选择器结合使用css选择器： 在标签上通过特定的属性进行设置记号，将来通过嵌入式的方式拿到记号即可设置指定标签的样式。任何一个标签上自带一个记号（选择器）  元素选择器|标签选择器(3)外部式link引入必须在head标签内通过link标签引入外部式css文件进行设置样式(4)外部式import引入(很少用)在head中必须编写style标签通过import关键词引入--><font color="red" size="7" style="background: yellow;">好好学习,天天向上</font><h1>我是谁我在哪里我要干什么</h1><h1>我是谁我在哪里我要干什么</h1><h1>我是谁我在哪里我要干什么</h1><h1>我是谁我在哪里我要干什么</h1><p>我是p段落标签</p><div>康总最帅</div>
</body>
</html>外部引入代码！！！！！！p{font-size: 30px;color: red;background: yellow;
}

2.css选择器的使用


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">/*标签选择器*/div{width: 100px;height: 100px;/*设置边框线*/border: 1px solid red;}/*ID选择器设置css*/#dyk{background-color:yellow;}/*类选择器设置css*/.zz{background-color: green; }</style><!-- js代码 --><!-- <script type="text/javascript">window.onload = function(){//根据id获取元素var oDiv = document.getElementById("dyk");alert(oDiv.innerHTML);};</script>--></head>
<body><!-- 选择器的使用在标签上做记号，可以在style标签中借助选择器设置标签的样式选择器：元素选择器   其实就是标签本身名称ID选择器     在标签上设置一个id属性  id属性的值自定义id属性的值在一个页面上值允许出现一次，否则会覆盖覆盖：样式不会覆盖，但是通过js获取标签时覆盖必须在指定选择器的前面+#类选择器     在标签上设置一个class属性，  class属性的值自定义class属性的值可以相同必须在指定选择器的前面+.语法：css引入方式——嵌入式或者外部式引入选择器名称{属性名:属性值;属性名:属性值;属性名:属性值;属性名:属性值;}--><div id="dyk">邓炎康</div><br><div class = "zz">康康</div><br><div class="zz"></div></body>
</html>

3.css文本上的设置


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">div{width: 100%;height: 30px;border: 1px solid red;/*background: red;*/}#oDiv1{/*background: yellow;*//*设置字体大小*/font-size: 20px;}#oDiv2{color: red;}#oDiv3{/*显示下划线*/text-decoration: underline;}a{/*去除下划线*/text-decoration: none;}#oDiv4{/*设置字体加粗*/font-weight: bold;}#oDiv5{/*设置倾斜*/font-style: oblique ;}#oDiv6{font-family: "华文彩云";color: blue;font-size: 20px;/*设置文字之间的间距*/letter-spacing: 10px;/*设置文字的缩进（针对第一个）*//*text-indent: 2em;*//*设置文本居中对齐*/text-align: center;/*垂直居中  利用height和line-height行高 */height: 100px;line-height: 100px;}</style>
</head>
<body><!-- css文本的属性样式 --><div id="oDiv1">我的地盘我做主</div><br><div id="oDiv2">我用双手成就你的梦想</div><br><div id="oDiv3">我用双手成就你的梦想</div><br><div><a href="www.baidu.com">百度一下</a></div><br><div id="oDiv4">我用双手成就你的梦想</div><br><div id="oDiv5">哈哈哈哈</div><br><div id="oDiv6">我用双手成就你的梦想</div><br><div></div><br><div></div><br><div></div></body>
</html>

4.css背景的使用


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><!-- 嵌入式css --><style type="text/css">/*需求：设置网页的背景图片*/body{/*设置背景background*//*background-image: url(img/1.jpeg);*//*问题：当图片过小时，会自动平铺（横向+纵向）*//*横向平铺*//*background-repeat: repeat-x;*//*纵向平铺*//*background-repeat: repeat-y;*//*不平铺*/background-repeat: no-repeat;}#oDiv{width: 400px;height: 300px;border: 1px solid red;background-image: url(img/1.jpeg);background-repeat: no-repeat;/*定位——一张大图中虚招指定的小图片显示*/background-position:-100px -100px;}#oDiv2{border:  1px solid red;height: 200px;width: 100%;}span{border: 1px solid red;width: 200px;}p{border: 1px solid red;}img{width: 200px;height: 200px;}ul{/*去除列表的符号*/list-style: none;}ul>li{/*border: 1px solid red;*/height: 20px;width: 20px;/*display属性——可以根据该属性在三大分类中相互转换*/display: inline-block;background-image: url("img/gg.png");background-position: -15px -16px;}ul .sb1{background-position: -15px -53px;}</style></head>
<body><!-- css背景设置 --><div id="oDiv"></div><!-- HTML标签分类：三大类 --><!-- 1.行内标签特点：都在一行显示，如果一行显示排满才在另外一行进行显示，不能设置宽度和高度2.块状标签特点：内容没有排满也会自动占满整行，可以设置宽度和高度3.行内-块状标签特点：都有（在一行显示  也可以进行设置宽和高）--><div id="oDiv2"><ul><li></li><li class="sb1"></li><li></li><li></li><li></li><li></li><li></li></ul></div><span>行内标签</span><span>行内标签</span><span>行内标签</span><span>行内标签</span><hr><p>段落</p><p>段落</p><img src="img/1.jpeg" alt=""><img src="img/1.jpeg" alt=""><br><br><br><br><br><br><br><br><br><br><br></body>
</html><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><!-- frameset标签  框架标签  将网页分割成几个等分rows    横向分割  rows = "20%,*"cols    纵向分割frame  子标签  控制内容的显示  引入HTML页面iframe   src-->
</body>
</html>

Css选择器+字体排版相关推荐

(前端)HTML之CSS(选择器字体排版背景）
网页的三大基石 HTML:结构 CSS:美化 JavaScript:动态 1.认识CSS样式 CSS全称为"层叠样式表(Cascading Style Sheets)"主要 ...
CSS快速入门 CSS选择器字体排版
一.CSS的概述 CSS的使用方式:4种 1.行内式样式css设置在标签中有一个属性可以设置css样式 ...
CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表
前言:本篇文章为 CSS 基础系列笔记第一篇,参考黑马程序员pink老师前端入门教程如有侵权联系删除,如有问题欢迎指出. 其他CSS基础相关文章: CSS基础「二」复合选择器 / 元素显示模式 / ...
前端：CSS/09/行内框架，CSS简介，CSS选择器，组合选择器，CSS注释，CSS尺寸属性，CSS字体属性，CSS文本属性
内嵌框架(行内框架,浮动框架) 语法格式:<iframe 属性="值">不支持时的提示信息</iframe> 描述:内嵌框架,相当于在现有的网页中,挖了一个 ...
HTML5+CSS3-边框背景图、多背景图、CSS选择器、网络字体、边框背景图片、过渡、放大、旋转
边框背景图片 1. background-origin:设置背景图片的起始原点 background-origin:border-box;------背景图片从边框开始显示 background-o ...
CSS选择器、网页美化（字体、阴影、列表、渐变）
css 如何学习 1.CSS是什么 2.CSS怎么用 3.CSS 选择器 4.美化页面(文字.阴影.超链接.列表.渐变) 推荐网站:菜鸟教程 1.css入门 1.1.什么是CSS Cascading ...
CSS day1 |选择器字体文本引入方式
目录 1 css简介 1.1 html局限性 1.2 CSS-网页的美容师 1.3 css语法规范 1.4 css代码风格 2 CSS选择器 2.1 css选择器的作用 2.2 标签选择器 2.3 类 ...
CSS选择器/CSS字体文本属性/CSS引入方式/案例
CSS 1.CSS简介 1.1 HTML的局限性虽然 HTML 可以做简单的样式,但是带来的是无尽的臃肿和繁琐 1.2 CSS-网页的美容师 CSS 是层叠样式表 ( Cascading Style ...
CSS3基础(基础认知,选择器,字体属性,文本属性,CSS 的三种引入方式)
CSS3基础 1. 基础认知 1.1 CSS 简介 CSS 的使用场景是什么? 美化网页,布局页面 CSS 的中文名称是什么? 层叠/级联样式表(Cascading Style Sheets) CSS ...

Css选择器+字体排版