css基础知识

最新推荐文章于 2020-10-20 20:49:50 发布

敲啥_啥不会

最新推荐文章于 2020-10-20 20:49:50 发布

阅读量179

点赞数 1

分类专栏： html css

本文链接：https://blog.csdn.net/weixin_44149940/article/details/103018300

版权

html 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

css

css基本样式

内部样式

<head>
    <teilet>
    </teilet>
     <!-- 内部样式表 -->
    <!-- text/css表示css是一个文本文件 -->
        <style>
            div{
                font-size:20px;
            }
        </style>
    
</head>
<body>
    <div>
        这是个大小为20像素的字体
    </div>
</body>

内联样式

<body>
     <!--inline内联样式  写在标签里面的 是标签的style属性值 -->
    <p style="font-size:30px;">
        这是一行大小为30像素的字体
    </p>
</body>

外部样式

HTML文件

<head>
    <title>Document</title>
 <!-- rel表明增加样式   href是css样式的外部链接地址 -->
    <link rel="stylesheet" href="样式.css">
</head>
<div>
        这是外部样式
</div>

css文件

div{
    color: black;
    font-size: 50px;
}

选择器

选择器{ 声明1；声明2； } 声明= 键:值

类选择器

HTML文件

<head>      
      <link rel="stylesheet" href="样式.css">
</head> 
<body>
   <div class="a">
       这是外部样式的类选择器 
    </div>
</body>

CSS文件

/* 类选择器 */
.a{
    color: black;
    font-size: 50px;
}

id选择器

HTML文件

<head>      
      <link rel="stylesheet" href="id选择器.css">
</head> 
<body>
   <div id="b">
       这是外部样式 的id选择器
    </div>
</body>

css文件

/* id选择器 */
#b{
    color: blue;
    font-size: 30px;
}

类选择器和id选择器

.类名{属性1:属性值1;} 应用类时class=“类名”

#ID名{属性1:属性值1;} 应用id时id=“id名”

两者最大不同在使用次数关键在于与js配合使用

复合选择器（也称为组合选择器 ,交集选择器）

是由两个或多个基础选择器其中第一个为元素标签第二个为class标签中间不能由空格

HTML

<body>
    <p>这是个段落标签</p>
    <p class="one">这是一个类名为one的段落标签</p>
</body>

CSS

 p.one{
        color: red;
        font-size: 30px;
  }
/* 交集选择器是指p标签并且类名为one */

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Az03Thcv-1573478074470)(C:\Users\高旭阳\Desktop\Typora\img\QQ截图20191108201330.png)]$

并集选择器

并集选择器类名、标签名、id名用逗号隔开且这些类名、标签名、id的需求属性值相同

<body>
    <div>这是一个普通的div标签</div>
    <p>这是一个普通的p标签</p>
    <span>这是一个普通的span标签</span>
</body>

div,p{
        color: burlywood;
        font-size: 50px;
     }

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ia8pr6Xb-1573478074471)(C:\Users\高旭阳\AppData\Roaming\Typora\typora-user-images\image-20191108130524195.png)]$

后代选择器

后代选择器外层标签卸载前面内层标签写在后
含义：选中外层标签内部所有的内层标签

body div{
        font-size: 30px;
        color: blue;
    }

<body>
    <div class="father">
        <p>
            这是孩子p：老大
        </p>
        <p>
            这是孩子p：老二
        </p>
        <span>
            这是孩子span：老三
        </span>
        
        <div>
            <p>
                这是孙子p;
            </p>
        </div>
    </div>
    
</body>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1bvMZMdu-1573478074471)(C:\Users\高旭阳\AppData\Roaming\Typora\typora-user-images\image-20191108163643805.png)]$

子代选择器

子代选择器中用大于号表示父标签在前子标签在后子代选择器
指的是选中father的所有子标签

.father>p{
        color: brown;
        font-size: 30px;
    }

<body>
    <div class="father">
        <p>
            这是孩子p：老大
        </p>
        <p>
            这是孩子p：老二
        </p>
        <span>
            这是孩子span：老三
        </span>
        
        <div>
            <p>
                这是孙子p;
            </p>
        </div>
    </div>
</body>

在这里插入图片描述

伪类选择器

CSS 伪类用于向某些选择器添加特殊的效果前期基本用于a标签装饰

    /* 未访问的链接 */
    a:link{
        color: rgba(255, 217, 0, 0.467);
        
    }
    /* 已访问的链接 */
    a:visited{
        color: pink;
        
    }
    /* 鼠标移动到链接上 */
    a:hover{
        color:rgb(9, 255, 0);
    }
    /* 链接被选中 */
    a:active{
        color: rgb(0, 255, 221);
    }

<body>
    <a href="#">登录</a>
    <a href="#">界面</a>
</body>

通配符选择器

*{
    color: #000;
    font-size: 20px;
}
/*  通配符选择器 给予任何标签元素属性 一般用于布局*/

input属性（按钮）

<form>
 <input value="hehe"/>
 <!--文本框 可编辑-->
    
 <input value="haha" readonly="0"/>
 <!--文本框 只读-->
    
 <input type="text" value="nale" disabled="">
 <!--文本框 只读-->
    
 <input type="password" value="ywd">
 <!--文本框 密码不可见-->
    
 <input type="radio" name="123" id="nan" value="boy"/><label for="nan">男</label>
 <input type="radio" name="123" id="nv" value="girl"/><label for="nv">女</label>
 <!--单选按钮-->
 <!-- checked是默认选项  以前checked=“自身”可为空值 现在不能为空值 -->
 <!-- labe for与id关联 点击label元素内容=选择按钮-->
    
 <input type="checkbox"  name="love"  value="eat"/><br>吃饭
 <input type="checkbox"  name="love" value="sleep"/><br>睡觉
 <input type="checkbox"   name="猪肉"  value="veat"><br>打豆豆
 <!--多选按钮-->
    
 <input type="button"value="普通按钮"οnclick="window.open('https://www.baidu.com/')"/>
 <!--超链接直接跳转页面--> 
    
 <input type="submit" value="提交按钮">
 <input type="reset"  value="重置按钮" name="" id="">
 <input type="image" value="图片按钮">
 <input type="image" src="../WORK/img/2.jpg" width="300" height="300" value="图片按钮2" id="">
 <input type="text" name="username" value="zhanghao"/><!--账号输入框-->
 <input type="password" name="pad"/>  <!--type=password 输入文本不可见-->
 <input type="file"><!-- file是选择文件 -->
 <!--input里面的value属性规定在表单被提交时被发送到服务器的值。-->
    
1.单行文本框
<input type="text" style="height:20px;width:100px;"/>
2.多行文本框（文本域）
<textarea style="width:300px;height:100px;"></textarea>
    
<fieldset>
     <legend>账号信息</legend>
     <input type="text" name="username" value="zhanghao"/>
     <input type="password" name="pad"/>
   </fieldset>
    <!--fieldset是边框-->
</form>

下拉框选择

<form action="">
        <select name="" id="">
            <option value="">小学</option>
            <option value="">初中</option>
            <option selected="3">高中</option>
            <option value="">大学</option>
            <option value="">研究生</option>
        </select>
 <!--<option> 与 <option/> 之间的值是浏览器显示在下拉列表中的内容
 selected表单显示的默认值       -->
 </form>



<form action="">
        <SELEct size="2">
                <option >小学</option>
                <option >初中</option>
                <option >高中</option>
                <option >大学</option>
                <option>研究生</option>
        </SELEct>
<!--size是直接显示两个元素-->
</form>



<form>
        <select multiple="2">
                <option value="">小学</option>
                <option value="">初中</option>
                <option value="">高中</option>
                <option selected="">大学</option>
                <option>研究生</option>
         </select>
<!-- multiple 属性规定可同时选择多个选项。 -->
</form>

文本属性

text-indent:2em; (首行缩进 1em是一个汉字的宽度)
text-decoration:overline; 横线在文本上
text-decoration:line-through; 横线在文本中间
text-decoration:underline; 横线在文本下方
text-decoration:none; 删除下划线（例如<a> )
text-transform:uppercase; 英语全部大写
text-transform:lowercase; 全部小写

text-transform:capitalize; 单词首字母大写

text-align属性

left 把文本排列到左边默认值：由浏览器决定
right 把文本排列到右边
center 把文本排列到中间
justify 实现两端对齐文本效果
inherit 定义为父元素继承属性值

字体

font-family：“宋体”
属性：font-style:“风格”

值： italic 斜体
oblque 倾斜
inherit 继承父元素字体

字间隔（单词）属性：word-spacing

值：
normal 默认值定义单词间的标准空间
length 定义单词间的固定空间
inherit 定义父标签的值

字符之间的间距属性：letter-spacing

值：
normal 默认值定义字符间没有额外的空间
length 定义字符间的固定空间（可负值）
inherit 定义父标签的值

字体加粗属性：font-weight

值：
bold 粗体字符
bolder 更粗的字符
lighter 更细的字符
100-900 400=标准字体 700=bold

css中字体顺序

font-style
font-variant
font-weight
font-size
font-family
此属性也有第六个值：“line-height”，可设置行间距

CSS对齐

绝对定位

使用 position 属性进行左和右对齐
对齐元素的方法之一是使用绝对定位：

属性：position：
值： absolute

文档流

标准文档流字体和图片大小不一但是底部对齐一行写不下显示下一行块级元素单独占据一行，并按照从上到下的方式布局。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ALiHTpzb-1573478074472)(C:\Users\高旭阳\Desktop\Typora\img\文本流.png)]$

浮动

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样

<body>
<p>在下面的段落中，我们添加了一个样式为 <b>float:left</b> 的图像。结果是这个图像会浮动到段落的右侧。</p>
<p>
<img src="/i/eg_cute.gif" />
is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>

浮动特性：
1.脱离文档流
2.脱离的浮动可以相互依靠
3.浮动后无论是div还是span等等都可以改变高和宽默认宽度是内容的宽度
只有左浮动和右浮动
浮动用于同一级的标签

CSS背景

background-image 属性为元素设置背景图像
background-image:url(‘图片地址’)
background-repeat 属性设置是否及如何重复背景图像。
background-repeat: repeat 在水平方向和垂直方向都重复
background-repeat: repeat-x 在水平方向重复
background-repeat: repeat-y 在垂直方向重复
background-repeat: no-repeat 图片仅显示一次
background-position 属性设置背景图像的起始位置。
background-position: top left ; top center ; top right ;
background-position: center left ; center center ;
background-position: center right ; bottom left ;
background-position: bottom center ; bottom right ;
background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。
background-attachment:sctoll 背景图片会随着页面滚动而滚动
background-attachment:fixed 当页面滚动是图片不会跟随滚动

标签的显示

块级元素

1.总是从新行开始（独占一行）
2.高度、行高、外边距和内边距都是可以控制的
3.宽度默认值是容器的100%
4.块级元素一个容纳内联元素（行内元素）和块级元素
一般的块级元素有 div、p（文本级块级元素但内容不能容纳块级元素）
div标签下可以有p标签但是p标签里面不能有div标签

行内元素

1.默认宽度是由它本身来定内容由多少宽度就有多少
2.高和宽无效，但水平方向的padding和margin可以设置垂直方向无效
3.和相邻的行内元素在一行上
4.行内元素只能容纳文本或其他行内元素 a标签除外

行内块元素

1.可以控制高度、宽度、行高、外边距、内边距
2.可以和相邻的（行内块元素）在同一行但是之间有空白缝隙
3.默认宽度是他内容的宽度

注意盒子转换行内块元素中间有空隙

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VL09pCxU-1573478074473)(C:\Users\高旭阳\Desktop\Typora\img\盒子转化行内块元素.png)]

CSS优先级

css选中同一个目标标签优先顺序
id>class>标签

<p id="pp" class="dd">这是什么颜色</p>

#pp{
        color: red;
    }
    .dd{
        color: blue;
    }

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LJDWV4QC-1573478074474)(C:\Users\高旭阳\Desktop\Typora\img\css优先级.png)]$

权重

权重比较
1.先看选择器是否选中了标签选中目标标签的权重胜出
2.都选中的情况下比较选择器中的类选择器、id选择器、标签选择器的个数

    <div class="hezi1" id="box1">
        <div class="hezi2" id="box2">
            <div class="hezi3" id="box3">
                <p>什么颜色</p>
            </div>
        </div>
    </div>

    #box1 .hezi2 #box3{
        color: blue;

    }
    #box1 div .hezi3{
        color: red;
    }
    p{
        color:green;
    }

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pGUERHMX-1573478074474)(C:\Users\高旭阳\Desktop\Typora\img\权重比较1.png)]$

    <div class="hezi1" id="box1">
        <div class="hezi2" id="box2">
            <div class="hezi3" id="box3">
                <p>什么颜色</p>
            </div>
        </div>
    </div>

    #box1 .hezi2 #box3{
        color: blue;

    }
    #box1 div .hezi3{
        color: red;
    }
    div.p{
        color:green;
    }

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4VgMqWKT-1573478074474)(C:\Users\高旭阳\Desktop\Typora\img\权重2.png)]$

盒子

属性：width（宽度）、height（高度）、padding（内边距）、border（边框）、margin（外边距）
注意：宽度和高度不是边框的高度是内容的宽度和高度

padding属性
padding:30px; ---------上下左右的内边距都是30px
padding:10px 20px ; ----------上下的内边距为10px 左右的内边距是20px
padding:10px 20px 30px ;----------上内边距为10px 右内边距为20px 下内边距为30px 左内边距为20px
padding:10px 20px 30px 40px;–上为10px 右为20px 下为30px 左为40px （顺序是上右下左）
小属性：
padding-top:10px; 上内边距10px
padding-right:10px; 右内边距10px
padding-bottom:10px; 下内边距10px
padding-left:10px; 左内边距10px

div{
    padding:20px 30px 40px;
    padding-top:10px;
}

如有重复就近原则

border

border属性

border:1px solid red; 1px的边框实线红色边框

用dorder画三角形
（1）当我们设置盒子的width和height为0时
（2）然后将border的底部取消：
（3）最后设置border的左边和右边为白色：

敲啥_啥不会

关注

1
点赞
踩
1

收藏

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

csscss基本样式内部样式<head> <teilet> </teilet>   <style> div{ font-size:...
复制链接

扫一扫