CSS概念
:全称:Cascading Style Sheetscascading:叠层style:样式sheets:列表
**它是:**层叠样式表(CSS)是描述标记语言页面格式的标准(或语言),CSS使开发人员能够分离内容和可视元素,以实现更好的页面控制和灵活性 CSS文件通常通过HTML文件中的链接附加到HTML文件。
CSS作用:
1,结构与样式分离的方式,方便后期的维护和修改可以用多套样式,
2,使得网页有任意样式切换的效果
3,使得页面载入的更快,降低服务器的成本
样式分类:
1,外部样式
2,内部样式:
3,行内样式
CSS选择器:
1,概念:用来选择需要添加的样式标签或者位置。
2,常用的选择器有:变迁选择器。类选择器。其他选择器
1,使用内部样式完成背景设置:(background)
background 背景样式是复合属性,可以多个添加。
添加背景图片,background-position
CSS外部样式
<link rel="stylesheet" type="text/css" href="index.css"/>
1、link:用于定义文档与外部资源的关系
2、rel="stylesheet":rel是relationship的英文缩写 -- 关系
3、type="text/css":定义css样式文件的类型
4、href="index.css":引用具体的文件
CSS常用样式:
1,颜色设置 color:1单词。2 #16进制。 3 rgb(255,0,0)
2,文本样式 :对齐方式、文本修饰、文本转换、文本缩进
direction:ltr
direction:ltr
text-align:justify
1、如果是字母和汉字的话,两者效果一样;
2、主要针对阿拉伯数字,两者不一样;
3、对于direction来说:对于数字改变书写顺序,对于小数点显示也不一样
文本修饰:
针对首行缩进:text-indent – em是字符单位,2em表示2个字符:比如:ff
字体类样式—font系列
列表样式
伪类样式
1、概念:通常情况下,超级链接上设置的样式,称之为伪类
2、作用:设置超级链接的四种状
3、小贴士:伪类是使用在超级链接上比较多,但是超级链接不是伪类伪类是选择器
伪类和伪元素的区别
<ul>
<li>11111</li>
<li>22222</li>
</ul>
CSS
li:first-child {
color: red;
}
// 选择器不能直接选取第一个子元素
// 伪类弥补了选择器的不足
而伪元素本质上是创建了一个虚拟容器(元素),我们可以在其中添加内容或样式。
<p>
<span class="first-letter">H</span>ello, World
</p>
CSS
.first-letter {
color: red;
}
其实上面的代码就是:
p::first-letter {
color: red;
}