首页 > 其他分享 >CSS基础属性

CSS基础属性

时间:2022-12-12 21:58:28浏览次数:37  
标签:居中 标签 基础 background div font CSS 属性

CSS属性

文字基本样式

windows网页默认是微软雅黑

/*
1.字体大小:font-size
2.字体粗细:font-weight
3.字体样式:font-style
4.字体类型:font-family
5.字体类型:font属性连写
​
line-height:行高
*/

字体大小

/*
属性名:font-size
取值:数字+px
注意点
    1.谷歌浏览器默认文字大小是16px
    2.单位(px)需要设置,否则无效
*/

字体粗细

/*
属性名:font-weight
关键字取值:
    正常:normal
    加粗:bold
纯数字取值(100-900的整百数):
    正常:400
    加粗:700
​
实际工作中:正常、加粗两种使用的最多
*/

字体倾斜

/*
属性名:font-style
取值:
    正常(默认值):normal
    倾斜:italic
*/

复合属性

/*
属性名:font(复合属性)
取值:
    font:style weight size family;
省略要求:
    只能省略前两个,如果省略了相当于设置了默认值
注意点:如果需要同时设置单独和连写的形式
    要么把单独的样式写在连写的下面
    要么把单独的样式写在连写的里面
​
*/

代码示例

    <style>
        p {
            /*
            font-size:;
            font-style:;
            font-weigth:;
            font-family:;
            或者此处写字体;  
            */
            /*复合属性即可以写成如下*/
            font: italic 700 66px 宋体;
        }
    </style>

 

 

层叠性(即覆盖)

   <style>
        /* 通过*定义一个通配符选择器 */
        * {
            color: blue;
            /*即后执行的代码会覆盖前面的*/
            color: red;
            font-size: 20px;
        }
    </style>

文本缩进(text-indent)

段落首行缩进,通常都是使用em进行控制,直接写数字的话,比如文字大小改了就还要修改

/*
属性名:text-indent
取值
    数字+px
    数字+em(推荐这种:1em = 当前标签的font-size的大小)
*/

文本下划线

也叫文本修实现

使用场景:清除a标签默认的下划线

/*
属性名:text-decoration
*/
属性值 效果
underline 下划线(常用)
none 无装饰线(常用来清除a标签所带的下划线)
line-through 删除线(不常用)
overline 上划线(几乎用不到)

行高

行高组成:上间距、文本高度(即文字高度)、下间距

应用场景:让单行文本垂直居中、以及取消文字上下间距

/*
作用:控制一行的上下行间距
属性名:line-height
取值:
    1.数字+px
    2.倍数(当前标签font-size的倍数)
    
应用:
    1.当单行文本垂直居中,可以设置line-height:文字所在标签父元素的高度
    2.网页布局中,会设置line-height:1  取消上下间距
*/

 

文本水平对齐方式(text-align)

html写的文本,css中默认都是左对齐的

/*
属性名:text-algin
取值
    属性值         效果
    left          左对齐(默认)
    center        居中对齐
    right         右对齐
​
注意点:
    如果需要让文本水平居中,text-algin属性给文本所在标签(文本的父元素)设置
*/

水平居中

如写在div里面的img图片标签居中,text-algin:center就要加在div上

以下标签居中需要给父级标签加,才能水平居中

/*
text-align:center
​
text-align:center让以下标签水平居中,需要给标签所在的父级标签设置才生效
​
    1.文本
    2.span标签,a标签
    3.input标签、img标签
​

水平居中小结

/*
给父级标签加过水平居中以后,父级内的标签就水平居中了
*/

标签居中

/*
如果需要让div、p、h(大盒子)水平居中
    通过margin: 0 auto   来实现
​
注意点:
    1.如果需要让div、p、h(大盒子)水平居中,直接给当前元素(标签)本身设置即可
    2.margin: 0 auto一般针对于规定宽度的盒子,如果大盒子没有设置宽度,此时会默认占满父元素的宽度
*/

div标签居中,以及给div盒子里的标签也居中

样式布局中,通常先给div盒子水平居中,然后给div标签设置标签居中,此时写在div盒子里的其它标签就会水平居中展示了

        div {
            /*设置div盒子的宽高*/
            width: 234px;
            height: 300px;
            /*给div盒子居中*/
            margin: 0 auto;
            /*给所在div盒子里面的元素(标签)居中*/
            text-align: center;
            background-color: #fff;
        }

居中案例

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: #f5f5f5;
            
        }
        .goods {
            /*设置div盒子的宽高*/
            width: 234px;
            height: 300px;
            /*给div盒子居中*/
            margin: 0 auto;
            /*给所在div盒子里面的元素(标签)居中,设置过以后图片和文字之类的就会水平展示了*/
            text-align: center;
            background-color: #fff;
        }
    </style>
</head>
​
<body>
    <div class="goods">
        <img width="160px" src="./平衡车.jpg" alt="">
        <h2 style="font-size: 14px; line-height: 25px;">九号平衡车</h2>
        <h3 style="line-height: 30px;color: #ccc;">成年人的玩具</h3>
        <h2 style="font-size: 14px;color:#ffa500">1999元</h2>>
    </div>
</body>
​
</html>

div标签使用规范

div标签就是用来网页布局的,一个页面可能用无数次,

原则:如果使用div,尽量使用类名控制样式

背景相关属性

/*
注:背景颜色和背景图只会在盒子里面展示
​
background-color(背景颜色) ,
background-image(背景图) ,
background-repeat(背景图平铺),
background-position(背景图位置)
*/

背景颜色

/*
背景颜色的默认值是透明
属性名:background-color:
属性值:
    颜色取值:关键字、rgb表示法、rgba表示法、十六进制
注意点:
    1.背景颜色默认值是透明:rgba(0,0,0,0)、transparent
    2.背景颜色不会影响盒子大小,并且还能看清盒子的大小和位置,一般在布局中会习惯先给盒子设置背景颜色
*/
    <style>
        /*必须是p标签,且类名是box的才会生效此样式*/
        div {
            width: 400px;
            height: 400px;
            background-color: pink;
            background-color: #ccc;
            /* 红绿蓝三原色,a是透明度0-1 
              r:red
              g:green
              b:blue
            */
            background-color: rgba(0, 0, 0, 0.5);
            background-color: rgba(red, green, blue, alpha);/*
            alpha:表示透明度*/
        }
    </style>
</head>
​
<body>
    <div class="div_height">
        <a href="#">超链接,设置属性;hover时按钮颜色变红</a>
    </div>
</body>

背景平铺

属性名:background-repeat(快捷键bgr)

属性取值 效果
repeat (默认值)水平和垂直方向平铺
no-repeat 不平铺(即:图片只展示一个)
repeat-x 沿着水平方向(x轴)平铺
repeat-y 沿着垂直方向(y轴)平铺

背景图位置

/*
属性名:background-position(快捷键bgp):
属性值:background-position:水平方向,垂直方向
​
方位名词:
    水平方向:
        left:默认就是左上
        center:水平方向居中
        right:水平方向右X轴右侧
    垂直方向:
        top:垂直向上
        center:垂直居中
        bottom:垂直向下
​
数字+px(坐标)
    坐标系:
        原点(0,0):盒子的左上角
        X轴:水平向右
        Y轴:垂直向下
方位名词取值和坐标取值可以混合使用,第一个取值表示水平,第二个取值表示垂直
*/

背景图和img标签的区别

重要的图片用img,不重要的图片用background-image

/*
需要在网页中展示一张图片
方法一:
    img是一个标签,不设置宽高,默认会以原图片尺寸显示
方法二:div标签+背景图
    需要设置div的宽高,因为背景图片只是装饰的CSS样式,不能撑开div标签
*/

标签:居中,标签,基础,background,div,font,CSS,属性
From: https://www.cnblogs.com/xiaomengniu/p/16977203.html

相关文章

  • 现代 CSS 高阶技巧,像 Canvas 一样自由绘图构建样式!
    在上一篇文章中--现代CSS之高阶图片渐隐消失术,我们借助了CSS@Property及CSSMask属性,成功的实现了这样一种图片渐变消失的效果:CodePenDemo--基于@property......
  • apache commons-pool2中GenericObjectPoolConfig的maxTotal、maxIdle、minIdle属性理
       Apachecommons-pool本质上是"对象池",即通过一定的规则来维护对象集合的容器。commos-pool在很多场景中,用来实现"连接池"/"任务worker池"等。大家常用的dbcp数据库......
  • flask基础
    1请求与响应1.1请求对象defindex():#请求对象,是全局的,需要导入,这个全局的request,在哪个视图函数中,就是当次的request对象,不会乱#request.method提交......
  • Unity 脚本基础
    Unity官方手册是最好的教程书,只是偶尔限于冗长ScriptingconceptsAlthoughUnityusesanimplementationofthestandardMonoruntimeforscripting,itstillh......
  • UML 基础: 类图
     ​​UML类图关系大全​​1、关联双向关联:C1-C2:指双方都知道对方的存在,都可以调用对方的公共属性和方法。在GOF的设计模式书上是这样描述的:虽然在分析阶段这种关系是......
  • Python学习基础笔记四十五——包
    OverridetheentrypointofanimageIntroducedinGitLabandGitLabRunner9.4.Readmoreaboutthe extendedconfigurationoptions.Beforeexplainingtheav......
  • 记录--记一次前端CSS升级
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助目前平台前端使用的是原生CSS+BEM命名,在多人协作的模式下,容易出现样式冲突。为了减少这一类的问题,提升研......
  • 基础算法学习笔记
    #笔记-基础算法快速排序将序列按从小到大或从大到小顺序排序。时间复杂度\(O(nlogn)\),不稳定。步骤确定分界点\(x\):\(q[l]\)、\(q[(l+r)\div2]\),\(q[r]\)、\(......
  • 算法基础课
    给定一个字符串SS,以及一个模式串PP,所有字符串中只包含大小写英文字母以及阿拉伯数字。模式串PP在字符串SS中多次作为子串出现。求出模式串PP在字符串SS中所有......
  • Html+CSS小案例项目:CSS开发小米商城电商产品展示效果
    关于电商产品展示,无论是从首页还是到栏目页,再到产品的详情页,产品展示效果不仅仅是在电商平台,在很多的企业网站也使用频繁,今天为大家分享一个HTML+CSS小案例项目:小米电商平......