CSS 的初步认识

最新推荐文章于 2021-09-15 15:52:51 发布

CN_Seagull

最新推荐文章于 2021-09-15 15:52:51 发布

阅读量227

点赞数

分类专栏：前端文章标签： CSS 前端

本文链接：https://blog.csdn.net/abc67509227/article/details/82841397

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

选择器：

子元素选择器：

对特定代码块中的子代码块的选择：

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        #father1 div{color:blue;}
        #father2 #p1{color:red;}
    </style>
</head>
<body>
    <div id="father1">
        <div>绿叶学习网</div>
        <div>绿叶学习网</div>
    </div>
    <div id="father2">
        <p id="p1">绿叶学习网</p>
        <p id="p2">绿叶学习网</p>
        <span>绿叶学习网</span>
    </div>
</body>
</html>

相邻选择器：

选择目标元素的下一个同级元素：

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        #lv+div{color:red;}
    </style>
</head>
<body>
    <div>绿叶学习网</div>
    <div id="lv">
        <p>绿叶学习网</p>
    </div>
    <div>绿叶学习网</div>
    <div>绿叶学习网</div>
</body>
</html>

群组选择器：

同时对几个选择器进行相同的操作（中间用英文逗号隔开）：

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        h3,div,p,span{color:red;}
    </style>
</head>
<body>
    <h3>绿叶学习网</h3>
    <div>绿叶学习网</div>
    <p>绿叶学习网</p>
    <span>绿叶学习网</span>
</body>
</html>

文字样式：

CSS文字属性

font-family 字体类型：

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>font-family属性</title>
    <style type="text/css">
        #p1{font-family:宋体;}
        #p2{font-family:微软雅黑;}
    </style>
</head>
<body>
    <p id="p1">字体为宋体</p>
    <p id="p2">字体为微软雅黑</p>
</body>
</html>

注：可以同时定义多个字体，用逗号隔开：
p{font-family:微软雅黑,Arial,Times New Roman;}
如果电脑没有前面的字体，则依次往后选择字体

font-size 字体大小：

字体大小属性值
（一般不采用属性标识，而采用像素( px )为单位）

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>font-size属性</title>
    <style type="text/css">
        #p1{font-size:10px;}
        #p2{ font-size: 15px; }
        #p3{ font-size:20px;}
    </style>
</head>
<body>
    <p id="p1">字体大小为10px</p>
    <p id="p2">字体大小为15px</p>
    <p id="p3">字体大小为20px</p>
</body>
</html>

color 字体颜色：

除了英文名称，还可以取16进制RGB值：

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>color属性</title>
    <style type="text/css">
        #p1{color: #03FCA1;}
        #p2{color: #048C02;}
        #p3{color: #CE0592;}
    </style>
</head>
<body>
    <p id="p1">字体颜色为#03FCA1</p>
    <p id="p2">字体颜色为#048C02</p>
    <p id="p3">字体颜色为#CE0592</p>
</body>
</html>

font-weight 字体粗细：

字体粗细

font-style 字体斜体样式：

字体斜体

（有些字体有斜体属性，有些没有，而 oblique 的作用就是让没有斜体属性的特殊字体倾斜）

段落样式：

段落属性

**text-indent：**一般属性值是字体大小 font-size 的两倍，表示缩进两个字：

<style type="text/css">
        p
        {
            font-size:14px;
            text-indent:28px;
        }
    </style>

边框：

边框属性

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS border属性</title>
    <style type="text/css">
    img
    {
        border-width:1px;
        border-style:solid;
        border-color:Red;
    }
    </style>
</head>
<body>
    <div id="div1">
        <img src="../App_images/lesson/run_cj/one piece.jpg" alt=""/>
    </div>
</body>
</html>

每次设计边框要设置三个属性过于繁琐，可以：border:1px solid Red;

局部样式：

上边框：border-top
下边框：border-bottom
左边框：border-left
右边框：border-right

（设置为 0px 表示去除，如：border-bottom:0px ，去除下边框）

背景样式：

背景样式

超链接：

1.去除超链接下划线：p{text-decoration:none;}

伪类定义动态超链接：

注意：定义这四个类必须按照 link、visited、hover、active 的顺序进行

    <style type="text/css">
        #div1
        {
            width:100px;
            height:30px;
            line-height:30px;
            border:1px solid #CCCCCC;
            text-align:center;
            background-color: #40B20F;
        }
        a{text-decoration:none;font-size:18px;}
        a:link{color:white}
        a:visited{color: purple; }
        a:hover{color:yellow;text-decoration:underline;}
        a:active{color:red;}
    </style>

注：hover 可以用在任何元素中，如：

img:hover{border:1px solid red;}

经过时显示红色边框

鼠标：

鼠标属性

cursor:属性值;

图片：

大小：

img{width:60px;height:60px;}

边框：

 img
        {
            width:60px;
            height:60px;
            border:1px solid red;
        }

水平对齐：

        .div_img1{text-align:left;}
        .div_img2{text-align:center;}

<div class="div_img1">
        <img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>
    </div>
    <div class="div_img2">
        <img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>
    </div>

垂直对齐：

文字环绕：

文字环绕

（让文字避开图片）

图片与文字间距：

margin-top:像素值;
margin-bottom:像素值;
margin-left:像素值;
margin-right:像素值;

img{margin-right:20px;margin-bottom:20px;float:left;}

列表：

列表项

自定义列表项符号：
list-style-image:url(图像地址)
ul{list-style-image:url("../App_images/lesson/run_cj/list.png");}

表格：

表格边框合并:

表格边框

表格边框间距：

table{border-spacing:5px 10px }

分别为水平方向间距与竖直方向间距

表格标题位置：

表格标题

盒子模型：

每个元素都可以看成一个盒子。
盒子由 content（内容）、padding（内边距）、margin（外边距）、border（边框） 四个属性组成

内容区：

内容包括文本、图片等多种类型，是必须填入的。
其中有三个属性： width、height、overflow
width 和 height 可以指定盒子内容区的高度和宽度（仅限于内容区）。
（只有块元素可以设置，行内元素无法设置）
overflow 为溢出属性，指定处理内容信息超出内容区范围时的处理方法。

内边距：

内容区和边框之间的空间，可以被看做是内容区的背景区域。
属性有5种：padding-top、padding-bottom、padding-left、padding-right、padding
属性用来指定内容区域个方向边框之间的距离
“padding:20px;”表示四个方向的内边距都是20px；
“padding:20px 40px;”表示padding-top和padding-bottom为20px，padding-right和padding-left为40px。
“padding:20px 40px 60px 80px;”表示padding-top为20px，padding-right为40px，padding-bottom为60px，padding-left为80px。
（按照顺时针的方式来记）

边框：

属性：border-width、border-style、border-color、border
分别指定边框的宽度、类型和颜色
“border-width:1px;border-style:solid;border-color:gray;”等价于“border:1px solid gray;”

外边距：

指两个盒子之间的距离，可能是子元素与父元素之间的距离，也可能是兄弟元素之间的距离。
属性有5种：margin-top、margin-bottom、margin-left、margin-right、margin
CSS允许给外边距属性指定负数值，指定复外边距值时，整个盒子向指定负值的相反方向移动，以此可以产生盒子的重叠效果。

正常文档流：

将窗体自上而下分成一行一行，块元素独占一行，相邻行内元素在每行中按从左到右地依次排列元素。

脱离正常文档流：用CSS改变元素位置

浮动float：

我们可以通过不同的浮动属性值灵活地定位div元素，通过CSS的属性float使元素向左或向右浮动。
（让盒子及其其中的内容浮动到文档的右边或者左边）

语法：float:取值

属性值：

left	元素向左浮动
right	元素向右浮动

例：

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS浮动float属性</title>
    <style type="text/css">
        /*定义父元素样式*/
        #father
        {
            width:400px;
            background-color:#0C6A9D;
            border:1px solid silver;
        }
        /*定义子元素样式*/
        #father div
        {
            padding:10px;
            margin:15px;
            border:2px dashed red;
            background-color:#FCD568;
        }
        /*定义文本样式*/
        #father p
        {
            margin:15px;
            border:2px dashed red;
            background-color:#FCD568;
        }
        #son1
        {
            /*这里设置son1的浮动方式*/
        }
        #son2
        {
            /*这里设置son2的浮动方式*/
        }
        #son3
        {
            /*这里设置son3的浮动方式*/
        }
    </style>
</head>
<body>
    <div id="father">
        <div id="son1">box1</div>
        <div id="son2">box2</div>
        <div id="son3">box3</div>
        <p>这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，</p>
    </div>
</body>
</html>

按照正常文档流：

若将子元素son1设置左浮动：

#son1
{
	float:left;
}

则：

此时 box1 变成了浮动元素，其宽度不在延伸，为容纳内容的最小宽度，下一个元素紧贴 box1

如果相邻的两个一个是浮动元素，另一个不是，那么不是浮动元素的那个将紧贴浮动元素
如果两个都是浮动元素，则外边距将生效，间隔为所定义的外边距

设置：

#son1
{
	float:left;
}
#son2
{
	float:left;
}
#son3
{
	float:right;
}

效果：

清除浮动clear：

在设置左浮动或者右浮动之后的元素内设置
语法：clear:取值
属性值：

left	清除左浮动
right	清除右浮动
both	左右浮动一起清除

一般使用 clear:both 将所有浮动清除
如上述程序添加：

p{clear:both;}

变为：

将 p元素（文字）清除了浮动，前一个元素产生的浮动就不会对后续元素产生影响。

定位布局：

将一个元素精确地放在页面上你指定的地方。

固定定位 fixed：

元素的 position 属性设置为 fixed 时，这个元素就被固定了，被固定的元素不会随着滚动条的拖动而改变位置。
在视野中，固定定位的元素的位置是不会改变的。

“position:fixed;”是结合top、bottom、left和right这4个属性一起使用的：

<head>
		<style type="text/css">
        #second
        {
            position:fixed;/*设置元素为固定定位*/
            top:30px;/*距离浏览器顶部30px*/
            left:160px;/*举例浏览器左部160px*/
            width:60px;
            height:60px;
            border:1px solid silver;
            background-color:#FA16C9;
        }
        </style>
</head>

（位置不改变的意思是相对浏览器的位置不改变，也就是说无论怎样滚动，其相对于浏览器当前页面的顶边距离永远不变）

一般用于“回顶部”特效和固定栏目位置。

相对定位 relative：

位置是相对于它的原始位置计算而来。
通过将元素从原来的位置向上、向下、向左或者向右移动来定位。
（其 top、left 等值是相对于原始位置的距离）

相对定位的容器浮上来后，其所占的位置仍然留有空位，后面的无定位元素仍然不会“挤上来”。

绝对定位：

一个元素变成了绝对定位元素，这个元素就完全脱离正常文档流了，绝对定位元素的前面或者后面的元素会认为这个元素并不存在，即这个元素浮于其他元素上面，它是独立出来的。
（同样是相对浏览器的位置）

静态定位：

如果没有指定元素的 position 属性值，默认静态定位。
表示块保留在原本应该在的位置，不会重新定位。

（本篇学习自绿叶网）

CN_Seagull

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 的初步认识

选择器：子元素选择器：对特定代码块中的子代码块的选择：&amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;gt; &amp;amp;amp;lt;html xmlns=&amp;amp;quot;http://www.w3.org/1999/xhtml&amp;amp;quot;&amp;amp;amp;gt;&amp;amp;amp;lt;head&amp;amp;amp;gt; &a
复制链接

扫一扫