3.1.1CSS样式规则:
格式:选择器{属性1:属性值; 属性2:属性值2; 属性3:属性值3;}
选择器严格区分大小写,属性和值不区分大小写。
*如果属性的值有多个单词组成且中间包含空格,则必须为这个属性值加上英文状态的引号
*在CSS代码中空格是不被解析的
3.1.2引用CSS样式表:
1.行内式:也称为内联样式,是通过标记的style属性来设置元素的样式,基本语法如下:< 标记名 style=“属性1:属性值1; 属性2:属性值2; 属性3:属性值3;”>内容< /标记名>
行内式只对所在的标记及嵌套在其中的子标记起作用。
没有做到结构与表现的分离。只有在样式规则较少且只在该元素上使用一次,或则需要临时修改某个样式规则时使用。
2.内嵌式:
是将CSS代码集中写在HTML文档的< head >头部标记中,并且用< style >标记定义,基本语法如下:
< head>
< style type=“text/css”>
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
< /style>
< /head>
< style>标记一般位于< head>标记中< title>标记后,也可以放在HTML的任何地方。必须设置type的属性值为text/css
3.链入式:
是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中,通过< link/>标记将外部样式表文件链接到HTML文档中。基本语法格式如下:
< head>
< link herf="CSSd=“文件的路径” type=“text/css” rel=“stylesheet” />
< /head>
< link />标记需要放在< head>头部标记中,并且必须指定< link />标记的3个属性:
herf:定义所链接外部样式表文件URL,可以是相对路径,也可以是绝对路径。
type:定义所链接文档的类型,在这里需要指定为text/css,表示链接的外部文件为CSS样式表。
rel:定义当前文档与被连接文档之间的关系,在这里需要指定为stylesheet,表示被链接的文档是一个样式表文件。
4.导入式:
对HTML头部文档应用style标记,基本语法格式:
< style type=“text/css” >
@import url(css文件路径);或 @import “css文件路径”;
< /style>
< link />标记引用CSS样式表将同时被加载,而@import引用CSS样式表会等到页面全部下载完再被加载。 常用链入式
3.1.3CSS基础选择器
1.标记选择器:
基本语法格式:
标记名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
所有的HTML标记名都可以作为标记选择器。优点:能快速为页面中同类型的标记统一样式,同时这也是他的缺点,不能设计差异化样式
2.类选择器
基本语法格式如下:
.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
类名即为HTML元素的class属性值。优势:可以为元素对象定义单独或相同的样式。
3. id选择器:
基本语法格式:
#id名{属性1:属性值1; 属性2:属性值2; 属性:属性值3;}
id名即为HTML元素的id属性值。元素的id值是唯一的,只能对应于文档中某一个具体的元素。
4.通配符选择器
所有选择器中作用范围最广的,能匹配页面中所有的元素。基本语法格式如下:
*{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
初始化应用较多。
3.2CSS文本相关样式
3.2.1CSS字体样式属性
1.font-size:字体大小
相对长度单位
说明
em
相对于当前对象内文本的字体尺寸
px
像素,最常用,推荐使用
绝对长度单位
说明
in
英寸
cm
厘米
mm
毫米
pt
点
2.font-family:字体:
基本语法格式:
p{ font-family:“微软雅黑”;}
*中文字体需要加英文状态下的引号,英文字体一般不需要
*如果字体名中包含空格、#、$等符号,则该字体必须加英文状态下的单引号或者双引号。
3.font-weight:字体粗细
值
描述
normal(400)
默认值,定义标准的字符
bold(700)
定义粗体字符
bolder
定义更粗的字符
lighter
定义更细的字符
100~900(100的倍数)
定义由细到粗的字符。
4.font-variant:字体(仅对英文字符有效)
*normal:默认值,浏览器会显示标准的字体
*small-caps:浏览器会显示小型大写的字体,及所有的小写字母均会转换为大写。但是,所有使用小型大写的字母与其他文本相比,其字体尺寸更小。
5.font-style:字体风格
*normal:默认值,浏览器会显示标准的字体样式。
*italic:浏览器会显示斜体的字体样式
*oblique:浏览器会显示倾斜的字体样式
常用italic 显示效果没有本质区别
6.font:综合设置字体样式
基本语法格式:
选择器{font·:font-style font-variant font-weight font-sizene-height font-family;}
使用font属性时必须按照上面语法格式中的顺序书写。
3.3.2 CSS文本外观属性
1.color:颜色
*预定义的颜色。red green blue
*十六进制,#FF0000 #FF6600 #29D794
*RGB代码,红色:rgb(255,0,0)或rgb(100%,0%,0%)
2.letter-spacing:字见距(中英文所有字符之间)
允许使用负值,默认为normal
3.word-spacing:单词间距(对中文无效)
允许使用负值,默认为normal
4.line-height:行间距(最多的是像素px)
像素px
相对值em
百分比%
5.text-transform:文本转换
控制英文字符的大小
*none:默认值,不转换
*capitalize:首字母大写
*uppercase:全部字符转换为大写
*lowercase:全部字符转换为小写
6.text-decoration:文本装饰(可以同时使用)
*none:没有装饰(正常文本默认值)
*underline:下划线
*overline:上划线
*line-through:删除线
7.text-align:水平对齐方式
*left
*right
*center
8.text-indent:首行缩进(建议em作为设置单位)可以使用负值
*不同单位的数值
*em字符宽度的倍数
*相对于浏览器窗口宽度的百分比%
9.while-space:空白符处理
*normal:常规(默认值),文本中的空格、空行无效,满行(到达区域边界)后自动换行
*pre:预格式化,按文档的书写格式保留空格、空行原样显示
*nowrap:空格空行无效,强制文本不能换行,除非遇到换行标记< br/>。内容超出元素的边界也不换行,若超出浏览器页面则会自动增加滚动滚条
来源:CSDN
作者:孙帅A
链接:https://blog.csdn.net/weixin_45728270/article/details/103516726