前端基础之CSS

基本语法规范 

引入方式

1.内部引入

     <style>p{color:blue ;font-size:30px;}</style>

2.行级引入

    <p style =  "color : green ;font-size : 40px;">hello ,wyx</p><p>hello , wyx1</p><h1>hello , wyx2</h1>

3.外部样式引入

 <link rel = "stylesheet"  href  = "./demo1.css">

选择器

1.类选择器

 <p class = "hello">hello ,wyx</p><p class = "hello1">hello , wyx1</p><h1 class = "play game">hello , wyx2</h1>

.hello{color:red;
}.play{color:green;
}.game{font-size:30px;
}

在第三行的play和game是两个类名分别代表不同的属性

2.id选择器

 <p id = "hello">hello ,wyx</p><h1 id = "play">hello , wyx2</h1>

#hello{color:red;
}#play{color:green;
}

3.通配符选择器：通常用于浏览器默认样式

*{background-color: beige;
}

此处为背景色

4.复合选择器（几个标签套几层）

例子1：

 <style>ol li{color : red;}</style>

 <ol><li>hh1</li><li>hh2</li><li>hh3</li></ol>

例子2：

    <ol class = "h"><li>hh1</li><li>hh2</li><li>hh3</li></ol>

     <style>.h li{color : red;}</style>

5.伪类选择器

a

a:hover   ->  鼠标放在链接上时显示的颜色

a:active  ->  鼠标点击时显示的颜色

    <style>a{color:red;}a:hover{color:green;}a:active{color:blue;}</style>

字体设置

font-family :"微软雅黑"

font-size:  30px        （字体大小）

font-weight :  normal  bold   bolder    lighter   600                   (设置字体粗细)

font-style :  normal   italic（斜体）    oblique（斜体，斜得更厉害）   

text-align : left   center   right     (居左居中居右)

text-indent: 30px     2em            (文本缩进)

text-decoration: underline  none   (文本装饰：下划线与不用下划线)->  超链接

line-height: 200px   （行间距）

<hr>  :  分割线

背景设置

background-color: red

background-image: url(../image.png)

background-repeat:    no-repeat    repeat-x  or   y      （图片重复）

background-position  :  100px  200px   

background-size :  100px  200px

边框与圆角矩形和圆

     div{width : 400px;height: 400px;border: 2px  green solid;border-radius: 20px;}

solid 是用来添加这个大盒子的边框的， border-radius  ：20px  （边框角的弧度）

  div{width : 400px;height: 400px;border: 2px  green solid;border-radius: 20px  40px  40px  20px;}

左上角 -> 右上角   ->  右下角 ->  左下角（弧度）

生成圆形边框：正方形+50%弧度

div{width : 400px;height: 400px;border: 2px  green solid;border-radius: 50%;}

页边距padding：边框与文字的间距

div{width : 400px;height: 400px;border: 2px  green solid;border-radius: 50%;padding:  30px  20px  30px 30px;box-sizing : border-box;}

这里的padding指的是页边距从上开始顺时针

box-sizing ： 页边距不再撑大盒子

外边距margin:块与块之间的距离，边框距离上左等距离...

 div{width : 100px;height: 100px;border: 2px  green solid;border-radius: 20px; margin: 100px 5px 5px 5px;}

上开始顺时针

 div{width : 100px;height: 100px;border: 2px  green solid;border-radius: 20px; margin: auto;}

这里的margin:auto  代表框在中间位置

元素形式

1.块级元素（单独占一行）

2.行内元素（不单独占一行）

将行内元素——>块级元素

         a{display: block;}