Python全栈之学习CSS(1)

1. 表单框类型




    
    
    单选框 , 复选框 , 下拉框


    

香蕉 黄瓜 茄子 冬瓜

文件上传:




    
    
     文件上传 


    
头像:


2. 表单属性




    
    
    input属性


    
    
用户名:
密码:
年龄:
邮箱:
班级:
国籍:

3. css引入




    
    
    css学习 css的三种引入方法
    
    
    
    


    

今天学习css

今天学习css

我们很开心

我是链接

my.css

a
{font-size:100px;}

4. 选择器

4.1 常用选择器




    
    
    常用选择器
    


    
    

1号标签111

1号标签222

2号标签333

我是连接 我是span

我是h3标签

aoe

4.2 选择器的优先级




    
    
    选择器的优先级
    


    
     选择器的优先级 


4.3 关系选择器




    
    
     关系选择器 
    


    
  • 动漫频道
  • 学习频道
  • 直播频道
  • 游戏频道
    1. 少儿频道
    2. 智慧树,大风车
    3. 老年人频道
  • 授课直播
  • 亚洲捆绑

4.4 属性选择器




    
    
    属性选择器
    


    
用户名:
密码:
性别:

4.5 伪类选择器_颜色设置




    
    
    伪类选择器
    


     老男孩教育 
    
  • 马春妮
  • 孙坚
  • 晓东
  • 文东
  • 王伟
  • 好心
  • 蜂拥
  • 倩倩
  • 石超
  • 帅帅
111222333444
111222333444
111222333444
111222333444
111222333444
111222333444
111222333444
111222333444
111222333444
111222333444

4.6 伪对象选择器

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>伪对象选择器</title>    <style>        .name        {color:goldenrod;}        /* 在内容之前插入 */        .name::before        {            content:"我问:";            color:green;        }        /* 在内容之后插入 */        .name::after        {            content:"肯定对!";            color:magenta;        }        /* 鼠标选中后的样式 */        .name::selection        {            background-color: mediumspringgreen;            color: white;        }    </style></head><body>        <span class="name">王文很帅,对不对?</span></body></html>

5. 字体属性设置




    
    
    css的相关属性: 字体属性 
    


    
  • 设置字体相关的属性1
  • 设置字体相关的属性2
  • 设置字体相关的属性3
  • 设置字体相关的属性4

cursor属性:

Python全栈之学习CSS(1)_第1张图片

6. 文本属性




    
    
    css的相关属性: 文本属性 
    


    

setwordxiangguanpropertyhahahah

设置文本属性111222233asd设置文本属性设置文本属性

本属性

本属性

本属性 特价取消

点我跳转

我是炫酷的阴影效果

7. 盒子模型




    
    
     盒子模型 
    


    
我是d3
我是d4
我是d5

order-style:

Python全栈之学习CSS(1)_第2张图片

8. 学习工具

学习css一般有三种工具提供给我们开发:
1. 代码编辑器本身一般自带提示或者语法提示.
2. css手册,内部提供提供了所有的样式属性和样式值的使用参考,甚至包括一些演示代码.
   http://css.doyoe.com
3. 浏览器也内置了一些css辅助工具给我们学习和开发.
   F12,或者Ctrl+shift+i,或者鼠标右键,检查代码

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!

你可能感兴趣的:(Python全栈之学习CSS(1))