05CSS选择和文本样式-课堂作业

什么是CSS
- CSS层叠样式表(Cascading Style Sheets)
-用于定义HTML内容在浏览器内的显示样式

 

css样式规则

css规则由两部分构成：选择器，声明

1.选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。
2.属性和属性值以“键值对”的形式出现。
3.属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
4.属性和属性值之间用英文“:”连接。
5.多个“键值对”之间用英文“;”进行区分。
可以用段落 和 表格的对齐的演示。

CSS引用
写在< head> </head>标签内:
　　<style type= "text/css" >
　　　　CSS样式...
　　</style>

 

CSS行内样式
在开始标签内添加sty|e样式属性
如:
　　<p style= "color:red;" >内容</p>

 

CSS内部样式
内部样式(嵌入样式) , 把css样式代码写在:
<style type= "text/css">
　　样式...
</style>

 

CSS外部样式

  • 外部样式表,把CSS样式代码写在独立的一个文件中
  • 扩展名: CSS文件名.CSS
  • 引入外部文件:　　<link href= "XX.css" rel= "stylesheet" type="text/css" />

 

CSS使用方法区别
类别　　　　　　　　　　引入方法　　　　　　　　　　　　位置　　　　　　　　　　　　加载

行内样式　　　　　　开始标签内style　　　　　　　　　　html文件内　　　　　　　　　　同时

内部样式　　　　　　<head>中<style>内　　　　　　　　  html文件内　　　　　　　　　　同时

链入外部样式　　　　< head>中<link>引用　　 　　CSS样式文件 与html文件分离　　　　页面加载时,同时加 载CSS样式

导入式 @import　　  在样式代码最开始处　　　　.CSS样式文件 与html文件分离　　　　  在读取完html文件之 后加载

 

 

使用链入外部样式的的好处
1. Css和html分离
2.多个文件可以使用同一一个样式文件
3.多文件引用同一个css文件, css只需下载一次

 

优先级
行内样式>内部样式>外部样式
说明:
1.链入外部样式表与内部样式表之间的优先级取决于所处位置的先后
2.最后定义的优先级最高(就近原则)

 

 

css中的选择器：

1.类选择器，又叫class选择器
2.id选择器
3.html元素选择器(又叫标签选择器)
4.通配符选择器
5.伪类选择器
6.组合选择器(多元素选择器,子元素选择器,后代选择器)

 

类选择器

基本语法:

  类选择器名称{

  CSS属性:属性值;

  CSS属性:属性值;

  }

id选择器

基本语法:

#id选择器名称{
CSS属性:属性值;
CSS属性:属性值;
}

 

伪类
伪类选择器定义特殊状态下的样式
无法用标签、id. class及其它属性实现

 

链接伪类

链接的4种状态:激活状态,已访问状态,未访问状态,和鼠标悬停状态。



伪类　　　　　　说明

:link　　　　　　未访问的链接

:visited　　　　已访问的链接

:hover　　　　鼠标悬停状态

:active　　　　激活的链接

 

 

链接伪类的顺序
: Link > :Visited > :Hover > :Active
说明:
1. a:hover 必须置于a:link和a:visited之后,才有效
2. a:active 必须置于a:hover之后,才有效
3.伪类名称对大小写不敏感。

 

CSS层叠
●可以定义多个样式
●不冲突时，多个样式可层叠为- -个
●冲突时,按不同样式规则优先级来应用样式

 

 

CSS使用方法优先级
行内样式》内部样式》外部样式

说明:
1.链入外部样式表与内部样式表之间的优先级取决于
所处位置的先后
2.最后定义的优先级最高(就近原则)

 

CSS优先级规则
同一样式表中:
1.权值相同
就近原则(离被设置元素越近优先级越高)
2.权值不同
根据权值来判断CSS样式，
哪种CSS样式权值高,就使用哪种样式



选择器权值

  • 标签选择器:权值为1
  • 类选择器和伪类:权值为10
  • ID选择器:权值为100
  • 通配符选择器:权值为0
  • 行内样式:权值为1000
 

权值规则

  • 统计不同选择器的个数
  • 每类选择器的个数乘以相应权值
  • 把所有的值相加得出选择器的权值


CSS使用方法的优先级
行内样式>内部样式>外部样式
注: link链入外部样式和style内部样式优先级,取决于先后顺序。
样式表中优先级
Id选择器> class选择器>标签选择器>通配符
权值相同　　　　权值不同

就近原则　　　　使用权值高的



CSS样式命名规则
采用英文字母、数字以及“-”和“-”命名
以小写字母开头,不能以数字和"-"、“-”开头
命名形式:单字 , 连字符，下划线和驼峰

 

文字样式
●字体:
font-family :字体名|字体集
●文字大小:
font-size :相对单位|绝对单位

 

 

font-size:绝对单位
属性值　　　　　　说明

in　　　　　　　　Inch,英寸

cm　　　　　　　　厘米

mm　　　　　　　　毫米

pt　　　　　　　　Point，印刷的点数

pc　　　　　　　　Pica , 1pc=12pt



font-size:相对单位

  • px像素
  • em/ %根据父元素决定

 

  • 文字颜色:

color :颜色名|十六进制|RGB

  • 文字粗细:

font-weight : normallbold|bolderlighter|100~900

  • 文字样式:

font-style : normalitalic|oblique

  • 水平对齐:

text-align: left| right | center |justify

  • 行高:

line-height:长度值|百分比

  • 垂直对齐:

vertical-align: baseline| sub| super| top| text-top
middle| bottom | text-bottom
长度值|百分比

 

字体属性　　　　　　　　　　　　说明

word-spacing　　　　　　　　　　设置元素内单词之间间距

letter-spacing　　　　　　　　　　设置元素内字母之间间距

text-transform　　　　　　　　　  设置元素内文本的大小写 capitalize luppercase| lowercase| none

text-decoration　　　　　　　　　设置元素内文本的装饰 underline| overline| line-through | blink | none




posted @ 2020-07-27 14:36  『yyh』  阅读(176)  评论(0)    收藏  举报