css基础样式

最新推荐文章于 2024-03-08 14:14:04 发布

baichaji

最新推荐文章于 2024-03-08 14:14:04 发布

阅读量90

点赞数 1

文章标签： css html 前端

本文链接：https://blog.csdn.net/baichaji/article/details/128347676

版权

1、css引入方式

1、行内式 即在标签内书写样式，只对该标签有用(不推荐)。

2、内嵌式在<head></head>中写入<style></style>将所有的样式写入。

<head>
 <style type="text/css">
    p {color:red;
        font-size:12px
    } 
 </style>
 </head>

3、外联（外部）式样式

新建一个后缀名为 .css的文件，在这个文件中写入样式，最后将这个文件引入到HTML文件中，使用<link>标签引入。

4、优先级

采取就近原则行内>内部>外部

2、选择器

2.1 基础选择题

1、标签选择器 直接使用标签名

2、id选择器 在要设置样式的标签上添加id属性 id名为name id选择器加样式时在前面添加一个# id名是唯一的。，

3、类选择器 类选择器设置样式时在前面添加 .

id选择器>类选择器>标签选择器

4.伪类选择器

:hover 鼠标悬停时;
:visited 访问之后
:link 未被访问
:active 鼠标点击没有松开
顺序 link visited hover active
:checked 被选中之后用于单选框、复选框
:disabled 所以被禁用的表单元素
:last-child 选择最后一个孩子
:first-child 第一个孩子
:nth-child(n) 任意一个孩子 odd 是奇数 even是偶数
:not() 用来排除所选元素以外的元素
:focus 获取焦点之后
:after 在之后插入内容，插入的内容是内联元素
:before 在之前插入内容
:first-of-type 匹配属于其父元素的特定类型的首个子元素的每个元素，等同于:nth-of-type(1)

5.伪元素选择器**

::before 在之前插入内容

::after 在之后插入内容

6.通用选择器

*{
    margin: 0;
    padding: 0;
}

7.属性选择器

   ul li[class]{
            background-color: red;
        }
        ul li[class^='li']{
            background-color: green;
        }
        ul li[class$='th']{
            background-color: rgb(222, 101, 170);
        }

2.2组合选择器

后代元素之间进行组合使用空格,后代选择器匹配属于指定元素后代的所有元素。
```
div p {
  background-color: red;
}/* div 元素内的所有p元素*/
```
子选择器之间使用 > ,子选择器匹配属于指定元素子元素的所有元素。
```
div>p {
  background-color: red;
}/*div 子元素中的所有p */
```
相邻的兄弟元素之间使用 + ，相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素。

兄弟（同级）元素必须具有相同的父元素，“相邻”的意思是“紧随其后”。
```
div + p {
  background-color: yellow;
}
```
兄弟元素之间使用 ~ ，通用兄弟选择器匹配属于指定元素的同级元素的所有元素。

下面的例子选择属于 <div> 元素的同级元素的所有 <p> 元素，只往下面找
```
div ~ p {
  background-color: yellow;
}
```
标签与类选择器 id选择器之间直接相连

3. 文本样式

color 字体颜色

background-color 背景颜色

font-size 字体大小

font-weight 字体粗细

font-family 字体种类

text-align 字体水平方向的位置

line-height 字体垂直方向的位置当数值与盒子高度一致时垂直居中

text-decoration 文本修饰，值为none时可以去掉a链接的下划线

4、盒模型

在HTML中所有的元素都可以看作一个盒子，每个盒子包括内容content、内边距padding、边框border、外边距margin。

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
margin问题
两个元素水平排列，两个元素之间的间距margin可以相加；
相邻块级元素垂直方向设置外边距时，会进行外边距合并，土狗上方元素设有margin-bottom，下方元素设有margin-top，那么他们两个元素之间的空隙不是margin之和，而是取两者中最大的。以最大者为准。

解决方案
只给同级元素中的一个元素设置margin
给每一个元素添加父元素，然后触发BFC规则（不推荐)

盒模型可以分为标准盒子模型以及怪异盒模型（ie盒模型）。

标准盒模型宽高：width/height + padding +border + margin

怪异盒模型：width/height + padding +border

5、宽高自适应

在网页布局中，我们经常需要定义元素的宽高，但有时候因为要适应不同的设不同的窗口大小，我们元素的宽高并不是要固定的，而是需要去自适应。

自适应的优点：可以使页面显示更加的灵活，可以适应不同的设备。

宽度自适应

块级元素在宽度设置为100%时，宽度等于父元素的宽度
如果块元素使用了定位但是却没有给定宽度，那么宽度取决于内容撑开的宽度，所以定位元素需要设置宽高。

高度自适应

1、自适应元素不设置高度或者高度为auto

2、可以给元素设置最小高度 min-height

baichaji

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css基础样式

相邻块级元素垂直方向设置外边距时，会进行外边距合并，土狗上方元素设有margin-bottom，下方元素设有margin-top，那么他们两个元素之间的空隙不是margin之和，而是取两者中最大的。在网页布局中，我们经常需要定义元素的宽高，但有时候因为要适应不同的设不同的窗口大小，我们元素的宽高并不是要固定的，而是需要去自适应。相邻的兄弟元素之间使用 + ，相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素。兄弟元素之间使用 ~ ，通用兄弟选择器匹配属于指定元素的同级元素的所有元素。
复制链接

扫一扫