css的用法与选择器用法

第一种：
行内使用，如下：
<div class="box1" style="color: pink;">pink</div>

将css写入标签行中

第二种：
写在head中，如图：

第三种：外联，

将css写入一个新文件，在html的head中进行引用 ：
<link rel="stylesheet" href="css路径">

css选择器：
1、通用选择器：*

用法：
*{

}

2、类选择器

.box{

}

“.”表示类选择器

3、标签选择器

p{

}

直接选择标签使用

4、id选择器

#box{
}

#表示id选择器

5、子代选择器

如下图：

子代选择器：
 

.box>li {

        }

使用>指向子代

6、后代选择器

.box ul li {

        }

使用空格分隔指向后代

7、逗号选择器   分组选择器

.p1,

.box3 {

       }

使用，分隔开两个可以选择的块或者行内元素

8、属性选择器：

[属性名="属性值"]

input[type="text"] {

        }

[type^="t"] type值以t开头的：
 

input[type^="t"] {

        }

具有该属性就能选到

div[name] {

        }

[type$="h"]选择type属性值以h结尾元素

input[type$="h"] {

        }

.box1+p   +号代表下一个

.box1+p {

        }

9、伪类选择器：

伪类的语法：

selector : pseudo-class {property: value}

10、伪元素选择器：

伪元素的语法：

selector:pseudo-element {property:value;}

比如：
用来创建一个伪元素，作为已选中元素的第一个子元素：
 

p::before {

        }

创建一个伪元素，作为已选中元素的最后一个子元素

 p::after {

        }

边框创建与弧度使用：
先创建一个按钮：
<button>提交</button>

使用css对其进行引用操作：
 

button {

            width: 200px;

            height: 100px;

            /* 边框*/

            border: 2px solid pink;

            /* 弧度*/

            /* border-radius: 10px; */

            border-top-right-radius: 20px;

            border-bottom-right-radius: 20px;

        }

透明度设置：

首先创建一个盒子：
 <div class="box"></div>

使用css调用设置：

.box {

            /* cursor鼠标样式 */

            cursor: pointer;

            width: 300px;

            height: 300px;

            /* rgba:设置透明度的 */

            background-color: rgba(200, 100, 100, 0.5);

            /* opacity  0-1  设置透明度的 */

            /* opacity: 0.3; */

        }

文字样式：

p {

            /* font-size: 50px;

            font-family: 'Courier New', Courier, monospace;

            font-weight: 800;

            font-style: italic; */

            /* 不建议进行连写    顺序不能乱 */

            font: italic bolder 50px 'Courier New', Courier, monospace;

        }

文本样式：
text-indent: 2em;

缩进二字符

 text-align: center;

水平居中

line-height: 200px;

单行文本垂直居中，行高等于容器高度

 display: inline-block;

inline-block  行内块元素

背景：
background-image：url（）引入图片

background-repeat    图片是否平铺

background-attachment：控制背景图是否滚动

background-size：背景图片大小

background-position：定位