CSS基础

weixin_47940048

已于 2022-07-29 21:20:43 修改

阅读量168

点赞数

分类专栏： html5和css3 文章标签： html5 css 前端学习

于 2022-07-02 22:49:04 首次发布

本文链接：https://blog.csdn.net/weixin_47940048/article/details/125578041

版权

html5和css3 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一、插入样式表的三种方法

1.外部样式表（External style sheet）：

<head>
    <link rel="styleheet" type="text/css" href="mystyle.css">
</head>

2.内部样式表（Internal style sheet）：

<head>
    <style>
        hr {
            color:red;    
        }
    </style>
</head>

3.内联样式（Inline style）：

<p style="color:red;margin-left:20px;">段落段落段落</p>

多重样式优先级：内联样式 > 内部样式 > 外部样式

二、选择器

1.标签选择器：写上标签名

2.类选择器：样式 . 定义结构类(class)调用

<style>
    .red{
        color:red;
    }
    .font35{
        font-size:35px;
    }
</style>
<body>
    <p class="red font35">我是p标签<p>
</body>

3.id选择器：样式#定义，结构id调用

<style>
    #red{
        color: red;
    }
</style>
<body>
    <p id="red">我是p标签</p>
</body>

4.通配符选择器：*

*{
    color: red;
}

5.复合选择器

1、后代选择器

.nav li a {
    color: red;
}

2、子元素选择器：>

.nav>a {
    color: red;
}

3、并集选择器：,

div,
.nav>a,
.red li {
    color: red;
}

6.链接伪类选择器：

<style>
        /* 1.未访问的链接 a:link  把没有点击过的(访问过的)链接选出来 */
        a:link {
            color: #333;
            text-decoration: none;
        }
        /*2. a:visited 选择点击过的(访问过的)链接 */
        a:visited {
            color: orange;
        }
        /*3. a:hover 选择鼠标经过的那个链接 */
        a:hover {
            color: skyblue;
        }
        /* 4. a:active 选择的是我们鼠标正在按下还没有弹起的那个链接 */
        a:active {
            color: green;
        }
    </style>

:focus选择器：把获取光标的元素选取出来

<style>
    input:focus{
        color: red;
    }
</style>
<body>
    <input type="text">
</body>

7.属性选择器

        /* 必须是input 但是同时具有 value这个属性 选择这个元素  [] */
        /* input[value] {
            color:pink;
        } */
        /* 只选择 type =text 文本框的input 选取出来 */
        input[type=text] {
            color: pink;
        }
        /* 选择首先是div 然后 具有class属性 并且属性值 必须是 icon开头的这些元素 */
        div[class^=icon] {
            color: red;
        }
        /* 选择首先是section 然后class属性必须是data结尾的 */
        section[class$=data] {
            color: blue;
        }
        div.icon1 {
            color: skyblue;
        }
        /* 类选择器和属性选择器 伪类选择器 权重都是 10 */

8.结构伪类选择器

        /* 1. 选择ul里面的第一个孩子 小li */
        ul li:first-child {
            background-color: pink;
        }
        /* 2. 选择ul里面的最后一个孩子 小li */
        ul li:last-child {
            background-color: pink;
        }
         /* 3. 选择ul里面的第2个孩子 小li */
         ul li:nth-child(2) {
            background-color: skyblue;
        }
        ul li:nth-child(6) {
            background-color: skyblue;
        }

nth-child()选择器：

        /* 1.把所有的偶数 even的孩子选出来 */
        ul li:nth-child(even) {
            background-color: #ccc;
        }

        /* 2.把所有的奇数 odd的孩子选出来 */
        ul li:nth-child(odd) {
            background-color: gray;
        }
        /* 3.nth-child(n) 从0开始 每次加1 往后面计算  这里面必须是n 不能是其他的字母 选择了所有的孩子*/
        ol li:nth-child(n) {
            background-color: pink;
        }
        /* 4.nth-child(2n)母选择了所有的偶数孩子 等价于 even*/
        ol li:nth-child(2n) {
            background-color: pink;
        }
        ol li:nth-child(2n+1) {
            background-color: skyblue;
        }
        ol li:nth-child(n+3) {
            background-color: pink;
        }
        ol li:nth-child(-n+3) {
            background-color: pink;
        }

nth-of-type()选择器：

<style>
        ul li:first-of-type {
            background-color: pink;
        }
        
        ul li:last-of-type {
            background-color: pink;
        }
        
        ul li:nth-of-type(even) {
            background-color: skyblue;
        }
        /* nth-child 会把所有的盒子都排列序号 */
        /* 执行的时候首先看  :nth-child(1) 之后回去看 前面 div */
        /* 没有red背景的 因为section的第一个孩子是p标签不是div */
        section div:nth-child(1) { 
            background-color: red;
        }
        /* nth-of-type 会把指定元素的盒子排列序号 */
        /* 执行的时候首先看  div指定的元素  之后回去看 :nth-of-type(1) 第几个孩子 */
        
        section div:nth-of-type(1) {
            background-color: blue;
        }
    </style>
<body>
    <ul>
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
        <li>我是第5个孩子</li>
        <li>我是第6个孩子</li>
        <li>我是第7个孩子</li>
        <li>我是第8个孩子</li>
    </ul>
    <!-- 区别 -->
    <section>
        <p>光头强</p>
        <div>熊大</div>
        <div>熊二</div>
    </section>
</body>

9.伪元素选择器：

        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        /* div::before 权重是2 */
        div::before {
            content: '我';
            background-color: purple;
        }
        div::after {
            content: '小猪佩奇';
        }

10.CSS优先规则：

选择器权重如下：

选择器	选择器权重
继承或 *	0,0,0,0（0）
元素选择器	0,0,0,1（1）
类选择器、伪类选择器	0,0,1,0（10）
ID选择器	0,1,0,0（100）
行内样式style=“”	1,0,0,0（1000）
!important	无穷大

最近的祖先样式比其他祖先样式优先级高
“直接样式”比“祖先样式”优先级高
优先级关系：!improtant > 内联样式 > ID选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

三、常用样式

1.CSS背景图片

背景颜色：background-color: 十六进制/RGB/颜色名称;
背景图像：background-image: url('test.png');
背景是否平铺：background-repeat: no-repeat/repeat-x/repeat-y/inherit;
设置背景托图片是否固定或随页面的其余部分滚动： background-attachment: scroll（随着页面的滚动而滚动，默认值）/ fixed（不会随着页面的滚动而滚动）
设置背景图片的位置：background-position: right top/right top/x% y%(50% 50%)

背景属性复合写法：

background:背景颜色背景图像是否平铺是否随着内容滚动起始位置；

background: black url(image/bg.png) no-repeat fixed center top;

背景颜色半透明：background: rgba(250, 0, 0, .3)；

2.CSS文本

文本颜色：color: red;
文本对齐方式：text-align: center/right/left/justify（两端对齐）;
文本修饰：text-decoration: none/underline/overline/line-through;
转换文本：text-transform: none/uppercase（大写）/lowercase（小写）/capitalize（每个单词以大写字母开头）;
首行文本缩进：text-indent: 50px/2em;
文字阴影：text-shadow: h-shadow v-shadow blur(可选，模糊距离) color(可选，阴影颜色); text-shadow: 2px 2px 8px #FF0000;
设置行高：line-height: normal/number/length/%/inherit;
垂直对齐：vertical-align: baseline(默认)/top/bottom/middle;
文本不换行：white-space: nowrap;
段字之间的空白：word-spacing: 30px;

3.CSS字体

字体系列：font-family: 'Times New Roman', Times, serif;
字体大小：font-size: 16px;
字体粗细：font-weight：700/bold;
字体样式：font-style: normal/italic（倾斜）

自定义字体：阿里巴巴普惠体：iconfont-webfont平台

@font-face {
  font-family: ; /*字体类型*/
  src: url(); /*引入字体文件*/
}

字体复合属性：

font: 字体样式字体粗细字体大小/行高字体系列；

font: italic 700 16px 'Microsoft yahei';

4.CSS列表

list-style-type: none

5.CSS盒子模型

盒子模型：就是把HTML页面中的布局元素看作一个矩形的盒子，也就是一个盛装内容的容器。CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括边框、外边距、内边距、和实际内容

1.Border(边框)

border-width：定义边框粗细，单位px

border-style：边框的样式

border-color：边框颜色

复合写法：

border: 5px solid pink;

border-top: 5px solid pink;

border-bottom: 10px dashed purple;

dotted：点线边框 dashed：虚线边框

solid：实线边框

圆角边框：border-radius: 数值/百分比；

分开写：border-top-left-radius: 5px;

表格的细线边框（合并相邻的边框）：border-collapse: collapse;

2.外边距和内边距（margin和padding）

内边距会影响盒子的实际大小，但是如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小

padding影响盒子的好处：在文字个数不同的情况下可以用padding撑开盒子来排版

复合写法：

padding: 5px; （4个边距都为5px）

padding: 5px 10px;（上下左右）

padding: 5px 10px 20px;（上左右下）

padding: 5px 10px 20px 30px;（上右下左）

margin同上

3.margin属性让盒子水平居中：

margin: 100px auto;（上下100px 左右居中）

margin-left:auto;

margin: auto;

4.外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并

1、相邻块元素垂直外边距的合并：当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下边距（margin-bottom），下面的元素有上边距（margin-top），则它们之间垂直间距不是下边距和上边距之和，而是取两者中的最大值

解决方案：尽量只给一个盒子添加margin值

2、嵌套块元素垂直外边距的塌陷：对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷子元素外边距值，造成视觉上子元素没有外边距

解决方案：

可以为父元素定义上边框
可以为父元素定义上内边距
可以为父元素添加overflow: hidden

浮动、固定、绝对定位的盒子不会有塌陷问题

5.清除内外边距：

* {
   margin: 0;
   padding: 0;
 }

6.CSS display（显示）与 visibility（可见性）

display属性设置一个元素如何显示，visibility属性设置一个元素是可见还是隐藏

隐藏元素：display: none;或者visibility: hidden;

visibility: hidden可以隐藏某个元素，但隐藏的元素仍占用空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局
display: none可以隐藏某个元素，且隐藏的元素不会占用任何空间，也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面上消失后

1、display属性

display:none；隐藏对象，不再占有原来的位置
display:block；除了转换为块级元素之外，同时还有显示元素的意思
display:inline；转换为内联元素

2、visibility可见性

visibility:visible；元素可视
visibility:hidden；元素隐藏，隐藏后还占用原来的位置

7. CSS overflow （溢出）

overflow属性指定了如果溢出一个元素的框（超过其指定高度及宽度）时，会发生什么

overflow:visible；不剪切内容也不添加滚动条
overflow:hidden；不显示超过对象尺寸的内容，超出的部分隐藏掉
overflow:scroll；不管是否超出内容，总是显示滚动条
overflow:auto；超出自动显示滚动条，不超出不显示滚动条

8.CSS float（浮动）

1、为什么需要浮动？

有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式
浮动最典型的应用是可以让多个块级元素一行内排列显示
多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

2、什么是浮动？float属性用于创建浮动框，将其移动到一边

float: none; ：元素不浮动（默认值）
float: left; ：元素向左浮动
float: right; ：元素向右浮动

3、浮动的特性

浮动元素会脱离标准流
浮动的元素会一行显示并且元素顶部对齐
浮动的元素会具有行内元素的特性

浮动的元素是互相紧贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会令起一行对齐

4、浮动布局注意点

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置
一个盒子里面有多个子盒子，如果一个盒子浮动了，那么其他兄弟也应该浮动，防止引起问题
浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流

5、清除浮动 clear

clear: both;

为什么清除浮动？

由于父级盒子很多情况下不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子（由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响）

清除浮动的本质时清除浮动元素造成的影响
如果父盒子本身有高度，则不需要清除浮动
清除浮动之后，父级就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流了

清除浮动的四种方法：清除浮动的四种方法_weixin_47940048的博客-CSDN博客

9.CSS position（定位）

CSS position（定位）_weixin_47940048的博客-CSDN博客

weixin_47940048

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础

1.外部样式表（External style sheet）：2.内部样式表（Internal style sheet）：3.内联样式（Inline style）：多重样式优先级：内联样式 > 内部样式 > 外部样式1.标签选择器：写上标签名2.类选择器：样式 . 定义结构类(class)调用 3.id选择器：样式#定义，结构id调用4.通配符选择器：* 5.复合选择器之后代选择器 6.复合选择器之子元素选择器：>7.复合元素选择器之并集选择器：, 8.
复制链接

扫一扫