CSS入门基础语法

最新推荐文章于 2024-06-12 17:21:41 发布

Cxkks

最新推荐文章于 2024-06-12 17:21:41 发布

阅读量135

点赞数

文章标签： html css css3

本文链接：https://blog.csdn.net/Cxkks/article/details/123284791

版权

初识CSS

b站链接(狂神说)

1. CSS的三种导入方式

外部样式<link rel="stylesheet" href="path.css"
内部样式<style></style>，写在<head>里面
行内样式<p style="color:#000000;fnot-size:20px"></p>

2. CSS的选择器

2.1 三种基本选择器

标签选择器、类选择器和id选择器

<head>
    <style>
        p{
            color: #000000;
        } /*类选择器*/
        .text{
            color: #000000;
        } /*类选择器*/
        #ps{
            color: #000000;
        } /*标签选择器*/
    </style>
</head>
<body>
<p class="text" id="ps">弟中之弟</p>
</body>

2.2 层次选择器

后代选择器
```
body p{
    background: red;
}
```
子选择器，只选择里层的一代
```
body>p{
    background: red;
}
```
相邻兄弟选择器，选择同层向下的第一个指定类型
```
.text+a{
    background: red;
}
```
通用选择器，选择同层向下的所有指定类型元素
```
.text~p{
    background: red;
}
```

2.3 结构伪类选择器

选择指定子元素

ul li:first-child{
    background: red;
}	/*ul里的第一个标签为li的子元素*/
ul li:last-child{}/*ul里的最后一个标签为li的子元素*/

定位到父元素，再选择当前层的元素

p:nth-child(2){
    background red;
}	/*定位到父元素，选择当前层的第二个，若第二个不是p元素，则不生效*/
p:nth-of-type(2){}	/*选择当前层的第二个p元素*/

悬停变换

a:hover{
    background: red; /*悬停链接颜色变化*/
}

2.4 属性选择器

将三种基本选择器结合起来使用

a[id]{}	/*选择含有id属性的a元素*/
a[class="text"]	/*选择class为text的a元素*/
a[class~="a1 a2 a3"]	/*属性之间用空格隔开，选择列表中所包含的属性的a元素*/
a[class^="te"]	/*选择class以te开头的a元素*/
a[class$="xt"]	/*选择class以xt结尾的a元素*/
a[class*="abcde"]	/*选择属性为其中包含的任意子字符串的a元素*/

3. 美化网页元素

3.1 字体样式

.p1{
    font-family: 楷体;	/*字体*/
    font-size: 25px;	/*字体大小*/
    font-weight: bolder;	/*字体粗细,bolder为加粗*/
    color: #000000;	/*字体颜色 */
}

3.2文本样式

#header{
    text-align: center;	/*文本中央对齐*/
    text-indent: 2em;	/*首行缩进*/
    line-height: 50px;	/*行高，等于height时可使单行文字上下居中对齐*/
    text-decoration: none;	/*可用于去除链接的下划线*/
    vertical-align: middle;	/*文本图片水平对齐*/
}

3.3 文本阴影

#header p{
    text-shadow: 10px 10px 5px #000000;	/*前两个参数为水平和垂直阴影的位置，必需；第三个参数为模糊距离，可选；后为颜色*/
}

3.4 列表样式

ul li{
    list-style: decimal;	/*使用数字列表，为none时去掉原点，也可用在ul标签中*/
}

3.5 背景样式

.block{
    background: #000000;	/*设置背景颜色*/
    background: url("path") repeat-x;	/*以图片作为背景，若图片较小按x方向平铺*/
}

4. 盒子模型

盒子模型尺寸计算为：内容元素+padding+border+margin

#header div:nth-of-type(1){
    height: 200px;	/*内容的高*/
    width: 300px;	/*宽*/	
    margin: 0 0 0 20px;	/*4个参数为顺时针*/
    padding: 5px 6px;	/*两个参数则分别对应上下和左右*/
    border: 1px solid #000000;	/*solid代表为实线边框*/
    
    margin： 0 auto; /*代表盒子在当前页面居中*/
    border-radius: 20px;	/*圆角边框*/
    box-shadow: 10px 10px 100px yellow;	/*第三个参数为阴影的偏移量*/
}

5. 浮动

行内元素不独占一行，如span a img

块元素独占一行，如h1~h6 p div

使块元素和行内元素实线行内排列有两种方式，分别为display和float

display

div{
    display: inline-block;	/*是块元素，但是可以在一行内联，此外还有inline和block*/
}

float(浮动)

.img1{
    border: 1px solid #481a80;
    /*display: inline-block;*/
    float:right
}
.img2{
    border: 1px solid #123;
    /*display: inline-block;*/
    float: left;
}
.img3{
    border: 1px solid #435;
    /*display: inline-block;*/
    float: left;
    /*clear: both;*/
}
.text{
    border: 1px solid #144b83;
    /*display: inline-block;*/
    float: right;
    /*clear: both;	clear为清除浮动float选项，使其沿浮动向下依次排列*/
}
/*此时上面的类已在html中用div块封装了起来,如下*/

<body>
  <div id="father">
      <div class="img1"><img src="imgs/1.jpg" alt=""> </div>
      <div class="img2"><img src="imgs/2.jpg" alt=""> </div>
      <div class="img3"><img src="imgs/3.webp" alt=""> </div>
      <div class="text">二叉树的遍历是指从根结点出发，按照某种次序依次访问二叉树中所有的结点，使得每个结点被访问依次且仅被访问一次。四种遍历方式分别为：先序遍历、中序遍历、后序遍历、层序遍历
      </div>
  </div>
</body>

解决浮动时父级边框塌陷的问题

父级添加overflow

#father{
    overflow: hidden;
}	/*在父级元素中增加overflow防止其溢出父级边界，若为scroll则为加滚动条*/

父级中添加伪类after

#father:after{
    content: "";
    display: block;
    clear: both;
}

6. 定位

相对定位

相对于原来的位置，进行指定的偏移，偏移后仍然在标准文档流中,不同于浮动
```
#box1{
    position: relative;
    left: 200px;
    bottom: 100px;	/*相对于原来向左即是向右平移200px，向下同样*/
}
```
可以用相对位移实现上方的链接图
绝对定位
- 在没有父级元素定位前提下，相对于浏览器定位
- 假设父级元素存在定位，会相对于父级元素进行偏移
```
#box2{
    position: absolute;
    right: 0;
    bottom: 0;	/*紧贴着左下角*/
}
```
固定定位

固定在某个位置，即使拉动窗口依然在窗口的指定位置
```
#box3{
    position: fixed;
    right: 0;
    bottom: 0;
}
```