锐客网

  1. 首页 > it技术 > >

day30-总结（css）

- 锐客网 a { text-decoration: none; } a:link { color: deepskyblue; } a:visited { color: purple; } a:hover { font-size: 25px; color: red; } a:active { background-color: yellow; } day30-总结
  • 表单标签form
  • 下拉菜单和多行文本
  • 空白标签
  • 初识css
  • css选择器
  • 伪类选择器
表单标签form表单标签
专门用来收集信息的标签，可以提交表单中收集的信息
action属性：设置提交信息的位置
method属性：提交方式 - post/get
< form action="" method="post">
                input type="submit" value=""/>
< /form>

input标签 (单标签)
1.是表单标签
2.type属性：
text - 普通的文本输入框
password - 密码输入框，输入的值密文显示
radio - 单选按钮， 同一类型对应的name值必须一样， value设置按钮提交的值， checked设置为checked使其处于选中状态
checkbox - 多选按钮， 同一类型对应的name值必须一样， value设置按钮提交的值， checked设置为checked使其处于选中状态
button - 普通按钮
reset - 重置按钮， 重置当前所在的form的各标签的值
file - 文件选择器
3.name属性：必须设置(a.用于提交信息)
4.value属性：标签内容
5.placeholder属性：占位符(提示信息)
6.maxlength属性：限制最多输入位数
7.readonly：输入框只读
8.disabled属性：按钮不可点击 disabled:disabledbr

fieldset标签
一个fieldset标签对应一个表单分组
legend属性：设置分组名

账号信息用户名：
密码：
个人信息性别：男  女
【day30-总结（css）】爱好：篮球  足球  乒乓球 

 



下拉菜单和多行文本1.下拉菜单
selected="selected"表示默认选中
< select name="city">
                < option selected="selected" style="display: none; "> 请选择城市< /option>
                < option value="https://www.it610.com/article/无选项">无选择< /option>
                < option value="https://www.it610.com/article/成都">成都< /option>
                < option value="https://www.it610.com/article/遂宁">遂宁< /option>
                < option value="https://www.it610.com/article/北京">北京< /option>
                < option value="https://www.it610.com/article/青岛">青岛< /option>
< /select>


2.多行文本
< textarea name="story" id="story" placeholder="请输入你的故事" style="width: 300px; height: 150px; " maxlength="400"> < "/textarea>


空白标签html中的标签分为2大类：
块级标签：一行只能有一个(不管标签的宽度是多少)
h1-h6，p，hr，ol，ul，dl，table，form，div
行内标签：一行可以有多个
a，image，input，select，textarea，span
div和span标签，是空白标签，没有任何特殊的意义(无语义标签)

< div style="background-color: red; width: 100px; float: left; "> 我是div < /div>
< div style="background-color: yellow; width: 90px; float: left; "> 我是div < /div>
< div style="background-color: blue; width: 120px; float: left; "> 我是div < /div>
< span style="background-color: green; "> 我是span < /span>

我是div我是div我是div我是span


初识css1.什么是css
CSS是web标准中的表现标准，用来对网页上标签的样式进行设置(长什么样，在哪)
css代码/css文件，称其为样式表
目前我们使用的是CSS3

2.写在哪儿
内联样式表：将css代码写在标签的style属性内
内部样式表：写在head标签中的style标签的内容中
外部样式表：写在一个css文件中，通过head'中的link标签来关联
优先级：内联的优先级最高，内部外部后加载优先级高

3.怎么写
选择器{属性：属性值； 属性：属性值}
选择器：用来选中需要设置样式的标签
属性：css属性
属性值：数字且表示大小要加px或者%
注意：属性之间用；隔开

补充属性：color：设置字体颜色background-color：设置背景颜色width：设置宽度 height：设置高度

1.关联外部样式表
< link rel="stylesheet" href="https://www.it610.com/article/css/index.css" />
2.style标签

< style type="text/css">
div{ background-color: yellowgreen; }
< /style>



css选择器选择器
0.元素选择器(标签选择器)：标签名
选中所有的标签名对应的标签
1.id选择器：#id属性值
每个标签都有一个id属性，整个html中，id的值必须唯一
2.class选择器：.class名
给标签设置class属性，通过class属性引用样式
3.通配符：* - 选中所有的标签
4.层级选择器：选择器1 选择器2...{}
5.群组选择器：选择器,选择器,...{}
补充：css中的颜色值：

1.颜色的英文单词
2.16进制颜色值0-255 -- 00-ff(#ff0000-红色)
3.rgb值:rgb(红,绿,蓝) rgba(红,绿,蓝,透明度) 透明度 0-1

< style type="text/css">
.c2 p{ color: blue; }
* { font-size: 25px; }
.c1 { background-color: green; }
a { text-decoration: none; background-color: yellow; }
#a1 { color: rgb(255,0,0); }
h1,span { color: gold; }
< "/style>


伪类选择器伪类选择器
选择器:状态
:link - 超链接的初始状态
:visited - 超链接访问后的状态
:hover - 鼠标悬停到标签上的状态
:active - 鼠标点击时的状态
给同一个标签通过伪类选择器给予不同状态的样式时要遵循
LoVe HAte
< style type="text/css">
a { text-decoration: none; }
a:link { color: deepskyblue; }
a:visited { color: purple; }
a:hover { font-size: 25px; color: red; }
a:active { background-color: yellow; }
< "/style>
百度一下

效果图

day30-总结（css）
文章图片
image.png day30-总结（css）
文章图片
image.png day30-总结（css）
文章图片
image.png

    推荐阅读


    上一篇：进山

    下一篇：maven|maven 安装配置