css核心基础
- Css样式规则
选择器{属性1:属性值;属性2:属性值;属性3:属性值;} - 引入css样式表
① 行内式(内联样式)
<标记名 style=”属性1:属性值1;属性2:属性值2;”>内容</标记名>
例如:<h1 style=”font-size:20px; color:red;”>
使用css行内式修饰以及标题的字头大小和颜色</h1>
② 内嵌式:将css代码集中写在html文档的<head>
头部标记中,并且用<style>
标记定义,格式如下:
<head>
<style type=”text/css”>
选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
</style>
</head>
③ 嵌入式:将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中,通过<link/>
标记将外部样式表文件链接到html文档中。格式如下:
<head>
<link href=”css文件的路径” type=”text/css” rel=”stylesheet” />
</head>
注:<link />
标记需放在<head>
头部标记中,并且必须指定<link/>
标记的3个属性。
④ 导入式:对html头部文档应用style标记,并在<style>
标记内的开头处使用@import语句,即可导入外部样式表文件。(不建议使用)格式如下:
<style type=”text/css”>
@import url(css文件路径);或@import “css文件路径”;
</style>
- Css基础选择器
① 记选择器:用html标记名作为选择器,按标记名称分类。格式如下:
标记名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
例如:p{font-size:12px; color:#666; font-family:”微软雅黑”;}
② 类选择器:使用“.”进行标识,后面紧跟类名。格式如下:
.类名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
例如:<p class=”类名”>
③ Id选择器:使用“#”进行标识,后面紧跟id名。格式如下:
#id名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
例如:<p id=”id名”>
④ 通配符选择器:用“*”号表示,它是所有选择器中作用范围最广的,能匹配页面中所有的元素。(不建议使用)格式如下:
*{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
- css文本相关样式
① css字体样式属性(type)
font-family(使用什么字体)
font-style(字体的样式,是否斜体):normal(默认值)/italic(斜体)/oblique(倾斜)
font-variant(字体大小写):normal/small-caps
font-weight(字体的粗细):normal(默认值)/bold(粗体)/bolder(更细的字符)/lithter(更细的字符)/100~900(100的整数倍)
font-size(字体的大小):absolute-size/relative-size/length/percentage
② css文本外观属性
color:文本颜色
letter-spacing:字间距(允许负值,默认为normal)
word-spacing:单词间距
line-height:行间距
text-transform:文本转换:控制英文字符的大小
text-transform属性:
none | 不转换 |
---|---|
capitalize | 首字母大写 |
uppercase | 全部字符转换为大写 |
lowercase | 全部字符转换为小写 |
none | 没有装饰 |
---|---|
underline | 下画线 |
overline | 上画线 |
line-through | 删除线 |
left | 左对齐(默认值) |
---|---|
right | 右对齐 |
center | 居中对齐 |
line-through | 删除线 |
normal | 常规(默认值),文本中的空格、空行无效、满行(到大区域边间)后自动换行 |
---|---|
pre | 预格式化,按文档的书写格式保留空格、空行原样显示 |
nowrap | 空格空行无效,强制文本不能换行,除非遇到换行标记 。内容超出元素的边界也不换行,若超出浏览器页面会自动添加滚动条 |
测试内容
` ② 继承性:值书写css样式表时,字标记会继承父标记的某些样式。 例如: p,div,h1,ul,ol,li{color:black;} 可以写成:body{color:black;} 7) Css优先级 标记选择器具有权重1,类选择器具有权重10,id选择器具有权重100 权重的叠加:例如#header strong.blue{color:red;} 权重:100+1+10
注:①行内样式优先。②权重相同时,css遵循最近原则。即靠近元素的样式具有最大的优先级。③css定义了一个!important
命令,该命令被赋予最大的优先级。例如:#header{color:red!important;}