Python web前端 03 CSS属性

时间：2023-11-27 16:02:26

Python web前端 03 CSS属性

一、文字、文本属性

　　1、文字属性

font-family #字体类型浏览器默认的字体是微软雅黑，字体中有多个字体的时候，如果前面的字体没有就使用后面的字体

#设置字体 font-family

#在style里面设置div{font-family:...(自己选择字体)}

#如果存在div{font-family:"宋体"，"自己选择字体"} 这个意思是如果浏览器不支持前面的字体，就设置为后面的字体

#设置字体大小 font-size

#div{font-size:20px},在谷歌浏览器下的字体最小为12

#单位：px   谷歌浏览器默认字体为16px，最小为12px

#单位：rem 相对于html（根标签）的字体大小，浏览器默认字体大小就是根标签的大小，同样根标签的字体大小也是可以改变的 2rem（2倍）

#单位：em   等于父级的字体尺寸-----相对于父级字体大小而言的，，字体大小是可以继承的 2em（2倍）

#单位： %   相对于父容器中字体的%调整  200%（2倍）

#字体加粗font-weight

#div{font-weight:bolder}    normal:默认字体    lighter：较细    bold：加粗   bolder：很粗

#当然也可以直接给值：只能是100-900的整百数，100相当于正常，700相当于bold
#斜体 font-style:italic

#div{font-style:italic}

#字体颜色

#div{color:red}

#1、英文单词颜色

#2、16进制 #999999，这用可以用#999来简写表示

#3、rgb  div{color:reg(255,0,0)} r表示red，g表示green，b表示blue，数字自己写，在pycharm里面可以直接点代码前的颜色小框框自己选择颜色，选择好之后他会自己出来一个rgba

#4、rgba  div{color:rgba(20,25,250,1)} 最后面的a表示透明度，0表示透明，1表示不透明，在0-1之间选择

　　2、文本属性

#对一段文本进行修饰

#p{width:300px(宽度);border:1px solid red(边框);white-space:nowrap(换行);text-overflow:ellipsis(出现省略号);overflow:hidden(超出隐藏)} #若要出现省略号，后面3条必须同时出现；white-space表示换行方式：nowrap表示不换行，normal表示换行，如果是一堆没有空格的英文，浏览器会把它当成一个英语单词而不隐藏
#首行缩进 text-indent:32px

#行号 line-height

#加了行高可以是文本垂直居中，如果一个div设置了行高，字体行高跟div行高一样的话就可以垂直居中了，如果没设置行高，div行高由字体撑开

#字距 letter-spacing 

#词距 word-spacing  

#文本水平对齐

#div{text-align:center} 文字快速水平居中

#文本大小写 text-transform

#div{text-transform:capitalize} none:表示默认值；uppercase表示转换成大写；lowercase表示转换为小写；capitalize表示将英文单词的首字母大写
#修饰文本：上划线，下划线，删除线

#div{text-decoration:capitalize} capitalize表示删除线，underline表示下划线，overline表示上划线，none表示取出任何修饰线

二、背景

#引入图片 img标签 <img src="img/0.jpg">

#另一种方法

#div{background-image:url("img/0.jpg")}#使用这种方法的时候必须写好宽高

#平铺

#若要不平铺图片只有背景图片的宽高小于被设置的原色的宽高才会有平铺效果

#background-repeat:no-repeat   #repeat-x 水平平铺，y垂直平铺

#背景大小

#background-size:200px 200px; 也可以写cover（ 等比例缩放知道铺满x，y轴，可以铺满整个框）contain（等比例缩放x轴或y轴其中的一个方向，不一定铺满，但是可以看到整个图片 ）

#位置

#background-position：center center；水平居中，垂直居中；也可以直接写bottom（垂直）

#background-position: 100px 200px; 距离水平方向100px 垂直方向200px

#复合写法

#background: yellow url("img/0.jpg") no-repeat 100px/200px 200px; 这是复合写法，颜色，图片 ，平铺，位置，大小

三、vertial-align

#vertical-alian表示垂直对齐方式

#定义行内元素的基线相对于该元素所在行的基线的垂直对齐

#baseline表示默认

#top表示元素顶部与行中的最高元素的顶端对齐，对齐到line-height的顶部#middle表示此元素放置在父元素的中部（小写x的中部） 对齐到line-#height中部（其实小写x中部）

#botton表示原色的顶端与行中最低元素的顶端对齐  对齐到line-height底部

#找的时候都是找最后一行所在的位置

#如果写的是text-top，对齐到的就是文字顶部，前面加个text的话就会对的文字去对齐

四、form

#form 是用来数据交互的

<form action="" method="get">#规定当前提交表单向何处发送表单数据 method默认get，另一个是post

账号：<input type="text"  name="user" placeholder=""请输入你的账号 value="">#placeholder表示不输入的时候的提示

密码：<input type="password"name="psd" required> #type表示密码，会自动隐藏写入的密码，required表示必须输入密码才能提交

单选框:<input type="radio" name="gender" value="male" id="man">男#同一个name下才会出现单选框，如果不写name，那么每个框框都可以选择了

<label for="man">男<label>

单选框:<input type="radio" name="gender" value="female">女

单选框:<input type="radio" name="gender" disabled value="secret">保密 #disabled 表示禁止选

多选框：

<input type="checkbox" name="hobby">唱歌

<input type="checkbox" name="hobby">跳舞

<input type="checkbox" name="hobby">看书

<input type="checkbox" name="hobby">逛街

<input type="checkbox" name="hobby" checked>敲代码#checked 表示默认选择

下拉框：

<select name="se" id="xz" size=""> #size表示默认显示3

    <option value="">长沙</option>

    <option value="" selected>成都</option>#selected表示默认显示成都

    <option value="">北京</option>

    <option value="">宁波</option>

    <option value="">浏阳</option>

</select>

文本域：

    <textarea> #文本域，比较坑，建议不用 resize:none表示禁止拉伸

        所有的文本都会显示出来

    </textarea>

    <input type="submit" value="提交列表">#提交上面的文本域

    <input type="reset">#重置内容

    <input type="button" value="注册">#给js操作，注册

</form>     
#如果是post模式

#需要先打开f12中的network才能提交数据

#如果要实现输入框内显示历史数据的话，在最上面的form里面加上autocomplete="on"

相关文章