1.css初识
html:结构层
css:样式层
层叠样式表
级联样式表
cascading : 层叠 级联
style: 样式
sheet:表格
为HTML标记语言提供了一种样式描述
字体颜色,宽高....
即[设置HTML页面中的元素的位置 排版 样式外关等]
如文本内容 (字体 大小 对齐方式等) 图片的外形(宽,高,边框等)
css语法:
由选择器和声明组组成
选择器{
写样式
}
选择器:要设置样式的html标签
声明组:{}
声明组:由声明语句组成
声明语句:由属性名和属性值组成
属性名和属性值以冒号相连
多余声明语句由分号隔开
}
div{
width:"100px";
height:"100px";
}
选择器: div
声明组{}
声明语句:width:100px; height:100px;
属性名:width height
属性值:100px 100px
2.css引入方式行间:
1.行间引入
写在开始标签中
写在style属性
css样式声明语句写在style=''引号里
适用场景:
单个html标签需要设置样式
优缺点:比较直观; 相同样式需要重复定义,造成代码冗余; 作用范围小, 不利于后期代码维护; 代码不能复用, 结构与样式变现不分离
注:任何HTML元素都可以设置行间样式
2.内部引入
3.外链引入
-->
<h1 style="color:red; background-color: green;">今天天气好</h1>
<!--
字体大小
-->
<p style="font-size: 40px;">肖战</p>
<!--
需求:多个p标签具有相同样式,此时需要给所有p标签设置行间样式
-->
<p style="font-size: 40px;"></p>
<p style="font-size: 40px;"></p>
<p style="font-size: 40px;"></p>
<p style="font-size: 40px;"></p>
<p style="font-size: 40px;"></p>
3.内部样式:
css注释: ctrl+/
注释不会在网页中出现 , 起代码说明作用 , 使代码更具可读性
会选择页面中所有的p标签
p{
font-size: 40px;
}
div{
width: 100px;
height:100px;
background-color: palevioletred;
}
标签选择器:
直接以标签名命名
会选择页面中所有对应的标签
慎用:因为页面中有很多相同的标签, 用标签选择器选择样式, 会选择页面中所有对应的标签,不需要设置某个样式的标签也会设置上, 造成样式混乱
解决:后代选择器或者子代选择器
<!-- 需求:多个p标签具有相同样式 -->
<!-- 行间样式 -->
<!-- <p style="font-size: 40px;">李洪基</p> -->
<p style="font-size: 40px;">李钟硕</p>
<p style="font-size: 40px;">宋仲基</p>
<p style="font-size: 40px;">李钟硕</p>
<p style="font-size: 40px;">李钟硕</p>
<!-- 内部样式 -->
<p>李钟硕</p>
<p>李钟硕</p>
<p>李钟硕</p>
<p>李钟硕</p>
写在head标签中
用style标签对包住
样式写在style中
适用场景:
1.单个HTML文档需要设置样式
优缺点:
相对于行间样式, 代码能够复用, 作用范围大于行间样式的范围;
结构与表现半分离
4.外链引入:
外链引入:
新建一个后缀名为.css的文件
在head标签里用link标签引入外链的css文件
注意:如果样式没有生效:
1.选择器写错了,没选上
2.外链没有引入, 或者路径错误
f12--sourse--css文件夹--1-dome.css
*适用场景:
多个HTML文档具有相同样式时
优缺点:
1.适用范围广,可以使用代码的复用;
2.便于修改和维护代码;
3.结构与表现彻底分离
-->
<div>我是外链</div>
<!--
### 总结:
行间样式适用于某个元素拥有特殊样式时使用, 结构 表现[不分离]
内部样式适用于单个页面拥有特殊样式时使用,结构表现[半分离]
外部样式适用于多个页面拥有相同样式时使用[相分离]
5.外链复用:
<div>
我这个div标签也是具有demo.css样式
</div>
6.CSS选择器:
清除浏览器默认样式
*{
外边距
margin: 0;
内间距
padding: 0%;
}
css选择器:
查找或者选取需要设置样式的html标签
基本选择器:基础选择器
*
div
class
id
复合选择器:至少有两个选择器组成
选择器的权重越大,优先级就越高, 就会优先显示谁的样式
1.通配符选择器
*
可以选择页面中所有的标签
权重:0
一般用于清除浏览器的默认样式
<p>ppp</p>
<ul>
<li>li</li>
<a href="#">百度</a>
<hl>hl</hl>
</ul>
7.class选择器:
class选择器:
给html标签设置一个类名
在结构:
在开始标签设置class属性
在样式:
.box
.+起的名字
权重: 10
词列表:
可以起多个类名, 用空格隔开
注意:具有相同类名的标签样式一样
推荐使用
作用:选择所有带有类名的元素
8.id选择器:
id选择器:
给html标签设置id属性
在结构:
在开始标签设置id属性
在样式:
#box
#+起的名字
id具有唯一性,一个id名在同一个页面只能出现一次
一般用于大的模块
经常与js一块使用, 获取元素 了解
作用:
选择所有带有指定id名的元素
相对来说用的较少
### 类与ID的命名规则
见词之义,尽量用英文; nav foot
始终建议以字母开头,可以包含数字 字母 下划线等 nav_box
不要以数字开头 1box
多个单词可以以驼峰式(newsCont) 中划线连接(news-cont)等
驼峰命名第二个单词大写 navbox---navBox nav-box nav_box
9.字体属性:
1.字体
一般写多个字体,形成回退系统,当浏览器第一个字体识别不了,依次往后识别,多个字体用逗号隔开
font-family: '黑体';
font-family: 'Times New Roman', '黑体', '宋体';
font-family: 'Times New Roman','黑体', '宋体';
当第一行字体不识别时,会找第二个字体
2.字体大小 px
浏览器一般默认16px字体,最小识别12px字体
font-size: 16px;
百分比 (相对于父元素字号计算) 了解
font-size:200px
em 相对单位 相对父元素来说 1em=16px
1*20 2*20
font-size: 2em;
3.字体倾斜
默认值 不倾斜
font-size: normal;
倾斜
font-style: italic
4.字体加粗
100-900
加粗 700
font-weight: bold;
默认值 不加粗 400
font-weight: normal;
font-weight: 400;
font-weight: 900;
5.行高
line-height: 40px;
考线:
在标尺上按住鼠标左键不松手，拖拽鼠标 按住alt键，放大图纸，为了测量更加准确，滚动滚轮，向外滚表示放大，向内滚表示缩小 方法：测量两行文字中间的间距，然后除以2，得到平均间距，拉出参考线，进行标注，方便测量
了解
自己字体大小的倍数
line-height: 2;
自己字体大小的倍数
line-height: 200%;
10.font的复合写法:
### font简写
作用:设置所有字体属性
语法: font:字体风格 字体加粗 字号/行高 字体;
依次[空格]隔开
总结:只有当字体同时存在简写才是有效的,简写属性可以精简代码