css入门基础-CSDN博客

本文链接：https://blog.csdn.net/yingyunzhizi/article/details/87990720

1.CSS :指层叠样式表 (Cascading Style Sheets)。后缀名：.css

2.页面要用CSS样式，有三种引用方式：谁最后执行，谁的优先级更高（就近原则）。
       2.1：行内样式：W3C不推荐使用。缺点：不能实现样式复用。内容和样式写在一起，违背了W3C           的规范。
       
           <h1 style="color:red;">祝大家新年好</h1>

2.2：内部样式：写在head标签内部。优点：可以页面内样式复用。缺点：不能实现页面间的样           式复用。
           
       <style type="text/css">
           h1{
               color: blue;
           }
               </style>

2.3：外部样式（推荐）：先写一个css文件，再在head标签中引入这个文件。优点：可以实现样式复用。
<link rel="stylesheet" type="text/css" href="css/3.css" />

3.CSS的使用总语法：
       选择器{
           样式名1：值1；
           样式名2：值2；
           ......
       }

4.CSS的选择器：
       4.1：标签选择器：以标签名作为选择器的名称。
       eg:h1{
       color:blue;
   }

4.2：类选择器：哪个标签要用类选择器，这个标签就先得取类名，以.类名开头。
           在同一个页面同一个类名在多个地方用。
       eg:
               <h1 class="c1 c5">你要回家</h1>

               /*类样式*/
           .c1{
               color:gray;
               }

4.3：ID选择器：哪个标签要ID选择器，这个标签就先得取ID名，以#ID名开头。
           在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次。在同一个页面，同一个id名只           能用在一个地方。
       eg:
           <h2 id="d1">天王盖地虎</h2>

           /*id样式*/
           #d1{
               color:blueviolet;
               }

4.4:三种基本选择器的优先级由高到低：id选择器>类选择器>标签选择器

       4.5：通用选择器：*，表示选页面上所有的标签。
       eg:/*通用选择器*/
           *{
               color:red;
               }

       4.6:群组选择器：给多个选择器同时设置样式，多个选择器之间用逗号隔开。
       eg:/*群组选择器*/
           h1,h3,h6{
               color:yellowgreen;
               }

       4.7:后代选择器：给某个选择器的后代(子子孙孙)选择器设置样式，选择器之间用空格分开。
       eg:/*后代选择器*/
           p span{
               font-size: 24px;
               color: red;
               }

       4.8:子选择器：只给某个选择器子选择器设置样式，选择器之间用>分开。
       eg:/*子选择器*/
           p>span{
               font-size: 24px;
               color: red;
               }

       4.9:相邻兄弟选择器：选中当前元素后面一个弟弟元素，选择器之间用+分开。
       eg:/*相邻兄弟选择器:选中当前元素后面一个弟弟元素*/
           h1+h2{
               color:brown;
               }

       4.10:属性选择器：[属性名]，只要是包含这个属性的标签全选中。
       eg:/*属性选择器*/
           [class]{
               color: green;
               }

       4.11：超链接伪类选择器：
   a:link {color: #FF0000}   /* 未访问的链接 */
a:visited {color: #00FF00}   /* 已访问的链接 */
a:hover {color: #FF00FF}   /* 鼠标移动到链接上 */
a:active {color: #0000FF}   /* 选定的链接 */

5.CSS样式：
       5.1：字体样式
       eg:/*字体样式*/
           p{
               /*字体颜色*/
               color:red;
               /*字体大小*/
               font-size: 50px;
               /*字体类型*/
               font-family: "宋体";
               /*字体倾斜*/
               font-style: italic;
               /*字体粗细*/
               font-weight: bolder;
               }

           /*字体的总样式*/
           font:italic bolder 50px "宋体";
               color:red;

       5.2：文本样式
       eg:/*文本样式*/
               /*首选缩进*/
               text-indent: 30px;

               /*字符间距*/
               letter-spacing: 10px;

               /*文本对方方式*/
               text-align: left;

               /*行高：使字体在垂直方向居中*/
               line-height: 30px;

               /*文本修饰*/
                   text-decoration: line-through;

       5.3：背景样式
           eg:/*背景颜色*/
               background-color: greenyellow;

               /*背景图片,与背景颜色不能同时设置，背景图片会将背景颜色给覆盖*/
               background-image: url("img/b.jpg");

               /*背景平铺方式*/
               background-repeat:no-repeat;

               /*背景位置*/
                   background-position: 100px 300px;

               背景样式的整体设置：
               /*设置背景的整体样式*/
                   background: url(img/b.jpg) 100px 200px no-repeat;

       5.4：列表项样式
           eg:/*去掉列表项图标
               list-style: none;*/

               /*设置列表项图标
               list-style-image: url(css/num_01.gif);*/

               /*设置列表项图标的位置,outside图标不占li宽度，inside图标占用li宽度
               list-style-position: outside;*/

               /*图标样式*/
                   list-style-type: decimal;

       5.5：边框样式：
           eg:/*边框样式*/
               /*边框的粗细
               border-width: 2px;*/

               /*边框颜色
               border-color: red;*/

               /*边框线的样式
               border-style: solid;*/

               /*边框总样式*/
               border: dashed 5px red;

6.盒子模型：盒子模型的方位设置顺序：上右下左，上下和左右。
       元素
       内边距（padding）:元素到边框之间的距离。
       外边距（margin）:元素边框与周围元素边框之间的距离。
       边框
       eg:border: solid 1px red;

               /*内边距*/
               padding: 30px 50px;

               /*外边距*/
               margin: 50px 100px 200px 30px;
       盒子模型的宽度=元素宽度+左右内边距+左右边框。
       盒子模型的高度=元素的高度+上下内边距+上下边框。
       能用外边距调样式就不要用内边距。

7.CSS 定位 (Positioning) 属性允许你对元素进行定位。
   css定位：静态定位static(平时用)，绝对定位absolute，相对定位relative，固定定位fixed。
   7.1:相对定位：相对于原有的位置发生改变，并且保留原有的空间位置。没有脱离标准文档流           （占了标准文档流位置）。
       eg:/*相对定位*/
               position: relative;
               left: 200px;
               top: -100px;

   7.2：绝对定位：相对于他有position属性的父级元素进行定位，如果父级元素没有postion定                       位，那么就找父级的父级，直到向上找到position定位为止，如果他                          向上找不到position定位，那么就以最外层的body进行定位。
                   脱离标准文档流（不占用标准文档流位置）
       eg:   /*绝对定位*/
               position: absolute;
               left: 200px;
               top: 100px;

       7.3: 元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
               z-index:定位元素所在的层次。
           eg:/*固定定位*/
               position: fixed;
               left:500px;
               top:100px;
                   z-index: 1;

8.浮动：float,将块级元素变成行级元素。
       eg:li{
               float: left;
               width: 100px;
               list-style: none;
               }

   清除浮动：clear:left/right/both.
           eg:#d1{
                   clear: both;
               }

9.总结：
       9.1：整个页面水平居中：margin:0px auto;
       9.2：文本水平居中：text-align:center;
           文本垂直居中：line-height:高度；
       9.3：页面整体布局：div+css
       9.4：导航菜单/左右侧菜单：div+ul-li
       9.5：整齐表单：form+table
       9.6：图文混排：div+dl-dt-dd