网页前端培训（CSS）

上次学习了HTML，本节我们来学习一下CSS让页面更加漂亮

1.CSS主要内容：

什么是CSS？

2.CSS基本使用：

1.基础语法：

CSS的基本使用
               CSS的三种使用方式
               一、CSS定义
                   选择器名{
                       属性名:属性值
                       属性名:属性值
                       ...
                   }
                   注意点：
                       1.声明需要使用{}括起来，每个声明以;结尾
                       2.一行建议一个声明
                       3.如果样式的属性值由多个单词组成，则用引号引起来
               二、CSS的注释
                   /*注释内容*/
               三、1.行内样式
                       直接写在标签上的样式，在标签上通过style属性定义的样式
                   2.内部样式
                       定义在style标签中的样式，style标签一般设置在head标签中
                   3.外部样式
                       定义在外部CSS文件中，通过link标签引入
                       <link rel="stylesheet" type="text/css" href="css文件的路径"/>
                       </head>
                   注：当有多重样式时，越精准越优先(就近原则)

CSS基本选择器
               1.通用选择器 *
                   *{
                       属性名：属性值
                       ...
                   }
               2.元素选择器
                   元素名/标签名{
                       属性名：属性值
                       ...
                   }
               3.ID选择器 #
                   #id属性值{
                       属性名：属性值
                       ...
                   }
               4.类选择器 .
                   .class属性值{
                       属性名：属性值
                       ...
                   }
               5.分组选择器
                   选择器1,选择器2,选择器3...{
                       属性名：属性值
                       ...
                   }

注：CSS样式的优先级，是根据选择器的精准度/权重来决定的，常见的权重如下，权重越大，优先级越高

                       元素选择器:1

                       类选择器:10

                       id选择器:100

                       内联样式:1000

组合选择器：
               后代选择器
                   选择指定元素的所有指定后代元素，以空格隔开
                   选择器指定元素{
                       属性名：属性值
                       ...
                   }
               子代选择器
                   选择指定元素的第一代子元素，以大于号隔开
                   选择器 > 指定元素{
                       属性名：属性值
                       ...
                   }
               相邻兄弟选择器
                   选择指定元素的下一个指定元素(只会找一个)，两者有相同的父元素，以加号+隔开
                   选择器 + 指定元素{
                       属性名：属性值
                       ...
                   }
               普通兄弟选择器
                   选择指定元素后面的所有指定元素，两者有相同的父元素，以波浪号~隔开
                   选择器 + 指定元素{
                       属性名：属性值
                       ...
                   }

代码：

<head><meta charset="utf-8"><title>基本选择器</title><style type="text/css">/*通用选择器*/*{color: deepskyblue;}/*元素选择器*/div{font-size: 30px;}/*ID选择器*/#p1{background-color: bisque;color: blueviolet;}/*类选择器*/.cls1{font-family: 楷体;}/*分组选择器*/#p1,.cls1,font{text-decoration: line-through;}</style></head><body><div class="cls1">这是一个div1</div><div>这是一个div2</div><p id="p1">这是一个p</p><span class="cls1">这是一个span</span><br /><font>这是一个font</font></body>

<head><meta charset="utf-8"><title>组合选择器</title><style type="text/css">/* 后代选择器 */.food li{border: chartreuse solid 1px ;}/* 子代选择器 */.food2 > li{border: #8A2BE2 dotted 1px;}/* 相邻兄弟选择器 */#mydiv + div{background-color: #FF0000;}/* 普通兄弟选择器 */#mydiv2 ~ div{background-color: coral;}</style></head><body><!--  获取class属性值时food的元素所有对应li列表项--><ul class="food"><li>水果<ul><li>香蕉</li><li>苹果</li><li>梨</li></ul></li><li>蔬菜<ul><li>白菜</li><li>油菜</li><li>卷心菜</li></ul></li></ul><hr /><ul class="food2"><li>水果<ul><li>香蕉</li><li>苹果</li><li>梨</li></ul></li><li>蔬菜<ul><li>白菜</li><li>油菜</li><li>卷心菜</li></ul></li></ul><hr /><div>这是相邻兄弟选择器1</div><div id="mydiv">这是相邻兄弟选择器2</div><div>这是相邻兄弟选择器3</div><div>这是相邻兄弟选择器4</div><hr /><div>这是普通兄弟选择器1</div><div id="mydiv2">这是普通兄弟选择器2</div><div>这是普通兄弟选择器3</div><div>这是普通兄弟选择器4</div></body>

实例：

2.常用属性：

1.背景
               背景颜色background-color
               背景图片background-color
               是否重复background-color
           2.文本
               文本修饰text-decoration
               去除文本效果(去除超链接的下划线)text-decoration
           3.字体
               字体颜色color
               字体大小size
           4.对齐方式
               左对齐left
               右对齐right
               中间center
               两边对齐（最后一行无效）justfy
           5.display属性
               none元素不会显示(隐藏)
               block元素变为块级元素且前后带有换行符(显示)
               inline（默认）内联元素，前后没有换行符
           6.浮动
               左浮动float:left;
               右浮动float: right;
           7.盒子模型
               padding 内边距
                   设置元素所有内边距的宽度，或者设置各边上内边距的宽度，默认顺序上右下左设定
                   单独设置各边的内边距:padding-top、padding-left、padding-bottom、padding-right
                   设置一个值：上右下左都一致
                   设置两个值：上下一致，左右一致
                   设置三个值：上右下一致，左和右一致
               border 边框
                   设置边框的颜色、样式、宽度
                   border:颜色颜色宽度
                       例:border:red soold 1px
                   单独设置边框的宽度、样式、颜色
                       border-width
                       border-style
                       border-color
                   border-collapse合并边框
               margin 外边距
                   设置元素所有外边距的宽度，或者设置各边上外边距的宽度
                   单独设置各边的外边距:margin-top、margin-left、margin-buttom、margin-right

8.下拉菜单，导航栏

CSS 导航栏 | 菜鸟教程

CSS 下拉菜单 | 菜鸟教程

代码：

<head><meta charset="utf-8"><title>常用属性</title><style type="text/css">#div1{width: 500px;height: 200px;/*背景颜色*/background-color: #FFE4C4;/*背景图片*/background-color: url(img/百度.png);/*是否重复*/background-color: no-repeat;}#div2{/*字体颜色*/color: #8A2BE2;/*对齐方式  left center right*/text-align: left;/*文本修饰*/text-decoration: line-through overline underline;/*首行缩进*/text-indent: 2em;}/* 盒子模型 */#d3{width: 100px;height: 100px;/*背景颜色*/background-color: coral;/*背景图片*//* background-color: url(img/百度.png); *//*是否重复*//* background-color: no-repeat; */border: #00BFFF 5px outset;/* 设置内边距 */padding: 15xp;/* 设置外边距 */margin-top: 100xp;a{/*去除文本效果(去除超链接的下划线)*/text-decoration: none;}#p1{/*对齐方式  left center right justfy两边对齐*/text-align: justify;}h2{/* display属性 none隐藏 block显示 */display: none;}#d1{/* 浮动 */width: 100px;height: 100px;background-color: #7FFF00;float: left;}#d2{/* 浮动 */width: 100px;height: 100px;background-color: #FF0000;/* 浮动：左浮动 */float: left;}</style></head><body><div id="div1">hello</div><hr /><div id="div2">hello world</div><a href="#">百度</a><hr /><p id="p1">周杰伦（Jay Chou），1979年1月18日出生于台湾省新北市，祖籍福建省泉州市永春县，中国台湾流行乐男歌手、音乐人、演员、导演、编剧，毕业于淡江中学。2000年发行首张个人专辑《Jay》。2001年发行的专辑《范特西》奠定其融合中西方音乐的风格 [1]  。2002年举行“The One”世界巡回演唱会 [2]  。2003年成为美国《时代周刊》封面人物 [3-4]  。2004年获得世界音乐大奖中国区最畅销艺人奖 [333]  。2005年凭借动作片《头文字D》获得金马奖、金像奖最佳新人奖 [6]  。2006年起连续三年获得世界音乐大奖中国区最畅销艺人奖 [7]  。2007年自编自导的文艺片《不能说的秘密》获得金马奖年度台湾杰出电影奖 [8]  。2008年凭借歌曲《青花瓷》获得第19届金曲奖最佳作曲人奖。2009年入选美国CNN评出的“25位亚洲最具影响力人物” [9]  ，同年凭借专辑《魔杰座》获得第20届金曲奖最佳国语男歌手奖 [10]  。2010年入选美国《Fast Company》评出的“全球百大创意人物” [11]  。2011年凭借专辑《跨时代》再度获得金曲奖最佳国语男歌手奖，并且第四次获得金曲奖最佳国语专辑奖；同年主演好莱坞电影《青蜂侠》 [12]  。2012年登福布斯中国名人榜榜首 [13]  。2014年发行华语乐坛首张数字音乐专辑《哎呦，不错哦》 [14]  。2021年在央视春晚演唱歌曲《Mojito》 [149]  。演艺事业外，他还涉足商业、设计等领域。2007年成立杰威尔有限公司 [16]  。2011年担任华硕笔电设计师，并入股香港文化传信集团 [17-18]  。周杰伦热心公益慈善，多次向中国内地灾区捐款捐物。2008年捐款援建希望小学 [19]  。2014年担任中国禁毒宣传形象大使 [20]  。</p><hr /><h2>hello</h2><div id="d1"></div><div id="d2"></div><div id="d3">这是一个盒子模型</div></body>

实例：