初识CSS

最新推荐文章于 2024-10-03 16:00:14 发布

木白^0^端墨

最新推荐文章于 2024-10-03 16:00:14 发布

阅读量224

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/markshui/article/details/108276826

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、CSS简介

1、CSS（Cascading Style Sheets）层叠样式表

Html负责内容，css负责样式

在之前的HTML提供了一些标签自带样式和一些属性，但是这些标签默认的样式或许使页面显得换乱，css单独是用来控制样式的。这样可以达到内容与样式分离

2、语法格式

选择器：

{
样式1：值1;

样式2：值2;
}

二、css使用方式

1、嵌入式

在head中加入style标签，然后把样式写到style标签中作为内容

    <style>
        h5{
            color:red;
            font-style: italic;
        }
    </style>

2、外链式

在head标签中嵌入link标签，通过link标签href属性引入外部的css文件，这样样式写在css文件中，语法当然和嵌入式一样

  <link href="./css/mycss.css" type="text/css" rel="stylesheet">

3、行间样式

通过给标签加style属性，将style样式写在标签中

  <h5 style="color: red;font-style: italic">作者：李白</h5>

4、三种方式选择使用

行内式一般用来作为测试，小的修改

嵌入式通常用于单个文件的使用和独立案例

外链式通常用于复杂的样式，比较多，想重复使用

开发：外链

测试：行内，嵌入

三种同时使用：

如果是相同的属性就近原则

如果是不同的属性合并原则

三、CSS选择器

通配符选择器* 所有的元素

1、基本选择器

标签选择器

id选择器： Id在一个html中是唯一的，通过一个id可以唯一定位一个元素

类选择器： 通过元素的class属性定位元素，一个元素可以设置多个class值，一个class值可以被多次使用（使用最灵活，使用最多的一种方式），影响范围大于id小于标签

优先级：id>class>tag

2、属性选择器

div[data=“item”]：找到拥有data属性并且值为item的元素

3、关系选择器

    <style>
        /*后代选择器*/
        #mydiv a{
            color: red;
        }
        
        /*子选择器*/
        #mydiv > a{
            color: red;
        }
        
        /*并列选择器*/
        #mydiv > a,.content{
            font-size: 50px;
        }

    </style>

4、伪类和伪元素选择器

伪类选择器: :hover

伪元素选择器: after before

    <style>
        #content{
            width: 200px;
            height: 200px;
            background-color: chartreuse ;
        }
        /*hover悬停 滑过*/
        #content:hover{
            width: 300px;
            background-color: red ;
        }

        #div1:after{
            content: "我是后来的";
        }
         #div1:before{
            content: "我是前面的";
        }
    </style>

5、选择器的优先级

权重

标签选择器：1

class选择器：10

id选择器：100

行间样式：1000

当使用多个不同的选择器的时候，选择了一个元素设置样式，那么元素到底使用哪个选择器的样式呢？

其实每个选择器都有一个对应的数值，称为权重，谁的数值大就用谁

如果是关系型选择器，将所有的选择器对应的值相加，值大的优先级高，如果值相等按照就近原则

四、CSS的颜色表示方式

计算机的颜色是按照工业三原色进行配色的，工业三原色：红绿蓝，理论上通过这三种颜色的混搭，通过不同比例可以形成所有的颜色，在CSS当中，颜色有三种表达方式：单词，十六进制，十进制

1、单词表示

常用的单词：red（红），green（绿），blue（蓝）

2、十六进制

格式：#000000

以#开头的六位十六进制组成，每两位代表一种三原色

3、十进制数字表示

格式：rgb(0,0,0)，rgb中3个参数，代表三原色

取值范围：0-255

五、常用的CSS样式属性

1、背景属性

属性	使用	说明
background-color	background-color：red	背景颜色
background-image	background-image:url(./img/bjtp.jpg)	背景图片
background-position	left 左，center 中，right右，top 上，botoom 下	背景图片的位置
background-repeat	no-repeat不重复，repeat-x 水平重复，repeat-y 垂直重复	背景图片是否平铺
background-size	background-size:100%100%	背景图片的大小

2、字体属性

属性	说明
color	字体颜色
font-size	字体大小
font-weight	字体粗细，normal 正常粗细，bold粗，bolder更粗，lighter更细，自定义粗细,是指具体的数值
font-family	字体类型
font-style	字体倾斜normal，italic（倾斜）

3、文本属性

属性	说明
text-indent	设置首行缩进
text-align	设置文本的水平对齐方式,left center right
line-height	行高一般用于单行文本的垂直居中
vertical-align	text-top,text-bottom,middle垂直的对齐方式
text-decoration none;	去除下划线

4、边框属性

属性	说明
border-top	顶部边框
border-left	左侧边框
border-right	右侧边框
border-bottom	底部边框
边框样式	solid实线 dotted点状线 dashed虚线
border连写	border : border-width border-style border-color
CSS新增的属性	border-radius:1、如果是四个值左上右上右下左下，三个值左上右上左下对角右下，两个值左上右下右上左下，一个值四个角

六、内外间距

1、盒子模型解释

元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中盒子来做比喻，帮助我们设置元素对应的样式。盒子模型示意图如下：

把元素叫做盒子，设置对应的样式分别为：盒子的边框(border)、盒子内的内容和边框之间的间(padding)、盒子与盒子之间的间距(margin)

2、内间距属性

元素边框距离内部内容之间的间距,设置内间距会改变元素的实际大小

属性	说明
padding-top	顶部内间距
padding-left	左边内间距
padding-right	右边内间距
padding-bottom	底部内间距
简写	padding:10px 30px 60px 90px;

3、外间距属性

设置元素外部距离四周元素之间的间距

margin的使用方式和padding一样

使用技巧：设置块元素水平居中 margin:0 auto;

属性	说明
margin-top	顶部内间距
margin-left	左边内间距
margin-right	右边内间距
margin-bottom	底部内间距
简写	margin:10px 30px 60px 90px;

七、块级元素,行内元素,行内块元素

元素就是标签，布局中常用的有三种标签，块元素、行内元素、行内块元素，了解这三种元素的特性，才能熟练的进行页面布局

标签类型	特征	举例
块级元素	支持全部的样式，如果没有设置宽度，默认的宽度为父级宽度100%，盒子占据一行、即使设置了宽度	div、 p、ul、li、h1~h6、dl、dt、dd
行内元素	支持部分样式，（不支持宽、高、margin上下、padding上下），宽高由内容决定，盒子并在一行，代码换行，盒子之间会产生间距	a、span、em、b、strong、i
行内块元素	支持全部样式，如果没有设置宽高，宽高由内容决定，盒子并在一行代码换行，盒子会产生间距	是新增的元素类型，现有元素没有归于此类别的，我们可以用display属性将块元素或者行内元素转化成这种元素

这三种元素，可以通过display属性来相互转化，不过实际开发中，块元素用得比较多，所以我们经常把行内元素转化为块元素，少量转化为行内元素，而要使用行内元素时，直接使用行内元素，而不用块元素转化

1、display属性

display属性是用来设置元素的类型及隐藏的，常用的属性有：

值选项	描述
none	元素隐藏且不占位置
block	元素以块元素显示
inline	元素以内联元素显示
inline-block	元素以内联块元素显示

八、元素溢出overflow

当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置

overflow属性	说明
visible	默认值，内容不会被修剪，会呈现在元素框之外
hidden	内容会被修剪，并且其余内容是不可见的
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容

浮动

1、文档流

文档流，是指盒子按照HTML标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置

2、浮动特性

（1）浮动元素有左浮动(float:left)和右浮(float:right)两种

（2）浮动的元素会向左或向右浮动，碰到父元素边界、浮动元素、未浮动的元素才停下来

（3）浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字饶图的效果

（4）相邻浮动的块元素可以并在一行，超出父级宽度就换行

（5）父元素内整体浮动的元素无法撑开父元素，需要清除浮动

2、清除浮动

（1）给父类元素设置固定的高度

（2）在最后一个子元素的后面加一个空的div，给它样式属性 clear:both

（3）使用成熟的清浮动样式类

九、案例：三国杀

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        *{
            margin: 0;
            padding: 0;

        }
        .up{
            height: 196px;
            width: 120px;
            background-color: black;
            float: left;
            margin: 10px;
            border-radius: 10px;
            padding: 5px;
        }

        .up img{
            /*padding: 25px;*/
        }

        .up p{
            font-family: 楷体;
            color: white;
            text-align: center;
        }

        .middle{
            width: 410px;
        }
        .middle p{
            text-align: center;
            font-size: 25px;
        }
        .floatclear:after{
            content: "";
            display: table;
            clear: both;
        }


    </style>

</head>
<body>
    <div class="floatclear">
        <div class="up"><img src="./img/貂蝉.png"><p>貂蝉</p></div>
        <div class="up"><img src="./img/貂蝉.png"><p>貂蝉</p></div>
        <div class="up"><img src="./img/貂蝉.png"><p>貂蝉</p></div>
    </div>
    <div class="middle">
        <p>vs</p>
    </div>
    <div class="floatclear">
        <div class="up"><img src="./img/貂蝉.png"><p>貂蝉</p></div>
        <div class="up"><img src="./img/貂蝉.png"><p>貂蝉</p></div>
        <div class="up"><img src="./img/貂蝉.png"><p>貂蝉</p></div>
    </div>

</body>
</html>

十、定位

浮动可以解决左右布局问题，但是在页面布局过程中，会遇到特定位置，这个时候需要用定位。之前的课程当中，我们学习background-position 给背景定位，现在我们学习postion，CSS通用定位

定位值选项	说明
relative	相对定位，参照物是父元素
absolute	绝对定位，参照物是整个页面
fixed	固定定位，参照物是浏览器窗口
static	默认值，没有定位，元素出现在正常的文档流中，相当于取消定位属性或者不设置定位属性