CSS学习笔记

CSS的基本概念
Cascading Style Sheet层叠样式表
标签：<p> <div>…之类的标签使用方式：直接输入标签名
类（class）：class名字使用方式：输入点+class名
ID: ID名
使用方式：输入#+id名
一般来说我们写CSS文件的时候用的都是第二种方法，class名
这是因为ID名一般被用作JS的选择器
给class命名也是有规范的，像xxx-xxxx 这样做的好处是让你的代码更清晰
别人也更容易看懂
**

三种连接样式

行内样式（内嵌样式）

直接写在标签里，使用style属性，只对当前标签有效，页面内容和表现形式是高度耦合的，不利于分工合作

内部样式（内联样式）：

内部样式是在head部分使用

外部样式（外联样式）

外部样式需要一个link标签来与html连接起来，内容与表现形式完全分离，而且任何需要用到改样式的页面都可以通过link标签连接的方式来实现。

字体相关属性：

text-align（对齐方式）：center（居中）/left（靠左）/right（靠右）
font-size（字体大小）：56px/24px /xxpx
font-family（字体体系）：“黑体”/“幼圆”
font-style（是否倾斜）: italic（倾斜）/normal（正常）
font-weight（字体粗细）：100/200/normal（400）/bold（700）/bolder
font-variant（是否大写）：normal/small-caps（小型大写）
color（字体颜色）：blue/red/pink/black/green/#FFFFFF/#F6F6F6
text-decoration: none（默认格式，无）/underline（下划线）/overline（上划线）/line-through
direction(文本方向): ltr(left to right从左到右)/rtl（right to left从右到左）
text-transform(大小写): none（默认）/capitalize(首字母大写)/uppercase（全部大写）/lowercase(全部小写)
line-height(行高): normal/xx px
letter-spacing(字符间距): 2px/5px /xxxpx
word-spacing(单词间距)：normal/2px/5px/xxxpx

案例1：望月怀远

海上升明月，天涯共此时。 /大小24px 字体楷体靠左
情人怨遥夜，竟夕起相思。 /颜色红色，靠右
灭烛怜光满，披衣觉露滋。 /左半句靠左，右半句靠右
不堪盈手赠，还寝梦佳期。 /大小30px 颜色蓝色字体幼圆居中

案例2：

我是江西小霸王
江西这边我最狂
要说江西谁最帅
还得江西小霸王

行高5px
自己想一个题目，标签h1

第一句黑体，红色
第二句加删除线
第三句加上、下划线从“西”处断开，分为“要说江西” “谁最帅” 间距50px
第四句单词间距10px

DOME1.HTML

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Demo1</title><style type="text/css">/* p{font-size:24px;} */</style><link rel="stylesheet" type="text/css" href="Demo1.css" /><style type="text/css">p{font-size:24px;}</style></head><body><div class="poetry"><h1 style="color:green;font-size:24px;">绝句</h1><p id="text1">两个黄鹂鸣翠柳</p><p class="text2">一行白鹭上青天</p><p class="text3">窗含西岭千秋雪</p><p class="text4">门泊东吴万里船</p></div></body>
</html>

DOME1.CSS


```css
.poetry{/*test-align: right;*/text-align: center;
}
p{font-size: 24px;}
#text1{/* color:pink;*/
}
.text4{text-align: right;
}
.text2{text-align: left;
}
.text3{font-family: "幼圆";/* 字体样式 */font-size: 50px;/* 字体大小 */font-style: italic;/* 是否倾斜 */font-weight: bold;/* 字体粗细 */
}

案例1.html

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>案例</title><style type="text/css">/* p{font-size:24px;} */</style><link rel="stylesheet" type="text/css" href="案例.css" /><style type="text/css">p{font-size:24px;}</style></head><body><div class="poetry"><h1 style="font-size:24px;font-family: 楷体;text-align: center">望月怀远</h1><p id="text1">海上升明月，天涯共此时.</p><p class="text2">情人怨遥夜,竟夕起相思.</p><p class="text3">灭烛怜光满,披衣觉露.</p><p class="text4">不堪盈手赠,还寝梦佳期.</p><p style="text-decoration: underline;">123456</p><p style="text-decoration: line-through;">123456</p><p style="text-decoration: overline;">123456</p><p style="text-direction: rtl;">6 7 8 9</p><p style="text-direction: ltr;">9 8 7 6</p><p style="text=transform: none;">Welcome To Jiaxing</p><p style="text=transform: capitaliza;">Welcome To Jiaxing</p><p style="text=transform: uppercase;">welcome to jiaxings</p><p style="text=transform: lowercase;">Welcome To Jiaxing</p><p style="line-height: normal;">正常行高<br>正常行高<br>正常行高</p><p style="line-height: 42px">42行高<br>42行高<br>42行高</p><p stype="letter-spacing: normal;">welcome</p><p stype="letter-spacing: 10px">welcome</p><p stype="letter-spacing: 10px">66666</p><p stype="word-spacing: 500px">行 高</p><p stype="word-spacing: normal">行 高</p></div></body>
</html>

案例1.css

.poetry{text-align: center;/*test-align: right;*/
}
p{font-size: 24px;}
#text1{font-size: 24px;font-family: 楷体;text-align: left;/* color:pink;*/
}
.text4{text-align: right;
}
.text2{text-align: right;color: red;/* color: red;*/
}
.text3{font-family: "幼圆";/* 字体样式 */font-size: 50px;/* 字体大小 */font-style: italic;/* 是否倾斜 */font-weight: bold;/* 字体粗细 */
}

案例2.html

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>案例2</title><style type="text/css">divp{line-height:5px;}</style></head><body><div><h1 style="font-size:24px;font-family: 楷体">江西谣</h1><p style="font-family: 黑体;color: red;">我是江西小霸王</p><p style="text-decoration: line-through;">江西这边我最狂</p><p style="text-decoration: underline overline; word-spacing: 50px;">要说江西 谁最帅</p><p style="letter-spacing: 10px;">还得江西小霸王</p></div></body>
</html>

CSS的基础概念、行内样式（内嵌样式）、内部样式（内联样式）、外部样式（外联样式）、字体相关属性及相关练习的案例相关推荐

你真的知道css三种存在样式（外联样式、内部样式、内联样式）的区别吗？
css样式在html中有三种存在形态: 内联样式:<div style="display: none"></div> 内部样式: <style> ...
CSS中伪元素、伪类选择器和字体、文本相关属性
CSS中伪元素.伪类选择器伪元素选择器伪元素选择器只能针对CSS中已有的伪元素起作用. CSS提供的伪元素选择器有如下几个: :first-letter:对指定对象的第一个字符起作用. :firs ...
13 ，CSS 入门基础,行内排版内嵌式排版和外部排版样式
1.认识 CSS 2.传统 HTML 设计网页版面的缺点 3.CSS 的特点 4.CSS 的排版样式 13.1 认识CSS CSS的英文全名是 Cascading Style Sheets,中文可翻译 ...
[css] img标签是行内元素，为什么却能设置宽高
[css] img标签是行内元素,为什么却能设置宽高原来CSS中还有一个概念:可替换元素MDN上是这么解释的:在 CSS 中,可替换元素(replaced element)的展现效果不是由 CSS ...
css怎么将块元素变成,CSS块元素、行内元素、行内块元素的转换
一.块元素转行内元素:display:inline 二.行内元素转块元素:display:block div{ display: inline; /*无效 width: 500px; height: ...
python列表生成式内必须定义匿名函数_Python基础-----基础概念总结
Python基础-----基础概念总结 Python程序的构成构成图行连接符:\ 对象基本构成和内存示意图对象及其引用(变量) 标识符基本用法命名规则变量和简单的赋值语句变量声明必须初始 ...
“高级”CSS样式一般应用于控制网页内容的外观。附加样式表分为内嵌样式表和外部样式表两种方式。
"高级"CSS样式一般应用于控制网页内容的外观.附加样式表分为内嵌样式表和外部样式表两种方式.
react内联样式_React样式化的组件：内联样式+ 3种其他CSS样式化方法（带有示例）...
react内联样式 There's no one right way to style your React components. It all depends on how complex you ...
Web开发（一）·期末不挂之第四章·CSS语法基础(CSS选择器选择器优先级各类样式表的使用方法)
CSS语法基础一.单纯html控制样式的缺点二. CSS✪✪✪ CSS概述 CSS基础语法组成选择器标签选择器类选择器 id选择器通配选择器后代选择器插入样式表的三种方式行内样式 ...

CSS的基础概念、行内样式（内嵌样式）、内部样式（内联样式）、外部样式（外联样式）、字体相关属性及相关练习的案例