第三次网页前端培训笔记

css的使用

css的定义

        选择器名{

                属性名：属性值；

                ......

        }

注：每个声明以分号结尾；一行建议一个声明；如果样式的属性值由多个单词组成，用引号括起来

css的注释

/*注释内容*/

css的三种使用方式

1、行内样式

直接写在标签页上的样式，在标签页上通过style属性定义的样式

2、内部样式

定义在style标签中的样式，style标签一般设置在head标签中

3、外部样式

定义在外部的css文件中，通过link标签引入

<link rel="stylesheet" type="text/css"href="css文件的路径" />

css的选择器

<style type="text/css">

通用选择器（*代表全选）

*{

color：blue（或者rgb值）

}

元素选择器

div {

font-size：30px；

}

ID选择器

#p1 {

background-color：blue

}

类选择器

.cls1 {

font-family：楷体

}

分组选择器

#p1,.cls1,font {

text-decoration：line-through

}

</style>

组合选择器

<style type="text/css">

后代选择器（指定元素的所有指定后代元素，以空格隔开）

.food li{

border：#9ACD32 solid 1px；

}

子代选择器（指定元素的子一代元素，以加号隔开）

#food2 > li {

border：palegoldenrod dotted 1px；

}

相邻兄弟选择器（选择指定元素的下一个指定元素（只会找一个），两者有相同的父元素，以加号隔开）

#mydiv + div {

background-color：#808080；

}

普通兄弟选择器（选择指定元素的所有指定元素，两者有相同的父元素，以波浪号隔开）

#mydiv2 ~ div {

background-color：#FA8072；

}

</style>

 图片摘抄至【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibili