前端之CSS

内容概要

表单标签的补充说明

CSS层叠样式表

"""
如何查找标签
如何添加样式
"""

内容详细

表单标签的补充说明

基于form表单发送数据
1.用于获取用户数据的标签至少应该含有name属性
	name属性相当于字典的键
   用户输入的数据会被保存到标签的value属性当中
	value属性相当于字典的值
2.如果不需要用户填写数据 只需要选择 那么我们需要自己去写	   value值
  <input type="radio" name="" id="" value="mela">男
  """ps:没有name属性的标签  form表单会直接忽略 不会发送"""
3.针对input标签理论

<label for="d1">  
    username<input type="text" name="" id="d1">
</label>

    passowrd:<input type="text">
4.标签的属性如果和属性值一样 那么可以简写
    <input type="file" name="" id="" multiple>
    <input type="file" name="" id="" multiple="multiple">

5.针对选择类型的标签可以提前设置默认项
    <label>
        gender
        <input type="radio" name="gender" id="" value="male">男
        <input type="radio" name="gender" id="" value="female" checked>女
        <input type="radio" name="gender" id="" value="other">其他
    </label>


    <label for="">
        hobbies
        <input type="checkbox" name="hobbies" value="basketball" > 篮球
        <input type="checkbox" name="hobbies" value="read" > 读书
        <input type="checkbox" name="hobbies" value="sleep" checked> 睡觉
        <input type="checkbox" name="hobbies" value="sing" > 唱歌


    </label>

6.下拉框与文件上传可以复选
    <input type="file" name="" id="" multiple>
    <select name="" id="">
        <option value="">上海</option>
        <option value="">河南</option>
        <option value="">北京</option>
    </select>
        <select name="" id="" multiple>
        <option value="">上海</option>
        <option value="">河南</option>
        <option value="">北京</option>
    </select>

CSS层叠样式表

主要来调节HEML的样式 就给 HTML穿衣服

"""
标签的两大重要属性>>>:区分标签
	1.class属性
		分门别类  主要用于批量查找
	2.id属性
		精确查找 主要用于点对点

学习css的流程
	1.先学习如何查找标签
	2.再学习如何调样式
"""

css语法结果

选择器{

样式名1:样式值1；

样式名2:样式值2;

}
css注释语法

/**/ 跟mysql的一样但是 css只有多行注释
引入css的多种样式
1. head内style标签内部编写(学习使用)
2. head内link标签引入(标准的方式)
3. 标签内部通过style属性直接编写(不推荐)

CSS选择器

CSS基本选择器

1.标签选择器(直接按照标签名查找标签)
css内:
h1 {
   color: pink;
}
html:
<form action="">
    <h1>嘿嘿嘿</h1>

</form>

2.类选择器(按照标签的class值查询标签)
.p1{
   color: aqua;
}

<div>
<h1 class="p1"> 呜呜呜 呼呼呼呼</h1>
</div>

3.id选择器(根据标签的id之 精准查找标签)
#d1 {
   color: blueviolet;
}

<div>
	<h1 id="d1"> 大大大飒飒飒飒</h1>
</div>

4.通用选择器(直接选择页面所有的标签)

* {
   color: blueviolet;
}


<div>
	<h1 > 大大大飒飒飒飒</h1>
</div>
<span>
	呜呜呜和
</span>
<p>啊啦啦啦</p>

CSS组合选择器

我们对标签的嵌套有另外一套说辞
    <p id="p1">ppp</p>
    <p id="p2">ppp</p>
    <div id="d1">div
        <span id="s3"> div span
        </span> 
        <div id="d2" >div
            <span id="s1"> div div span
                <h1 id="h1">我是 h1</h1>
            </span>

        </div>

    </div>
    <span id="s2"></span>
针对标签的上下层级以及嵌套有另外的说法
	父标签  < d1 就是 d2 的父标签>
    子标签  < d2 就是 d1 的子标签>
	后代标签 < d1 包裹的都是 d1的后代标签>   
	弟弟标签 < s2 是 d1 的弟弟标签>
	哥哥标签 < d1 是 s2 的哥哥标签> 
祖先标签 < d1 是 h1 的祖先标签>

1.后代选择器(中间是 空格)
div span {
    color: red;
}

包裹在 span里的文本标签 也都变红了

2.儿子选择器(中间是 大于)
div>div {
    color: blueviolet;
}

3.毗邻选择器(中间是 +)
div+span {
    color: blueviolet;
}

把div下面的紧挨着的span设置为紫色

4.弟弟选择器(小波浪号)
div~span{
    color: red;
}

分组与嵌套

多个选择器合并查找
div,p,span {
    color: red;
}

#h1,.d1,span {
    color: blueviolet;
}

    <p id="p1">ppp</p>
    <p id="p2">ppp</p>
    <div class="d1"> 的撒大苏打</div>
    <div id="d1" class="d1">div
        <span id="s3"> div span
        </span>
        <div id="d2" >div
            <span id="s1"> div div span
                <h1 id="h1">我是 h1</h1>
            </span>

        </div>
    </div>
    <h2>大撒大撒</h2>
    <span id="s2">大飒飒的</span>

# 查找class 含有 d1 的div 或者 样式类为d1 的div
div.d1 {
    color: red;
}

查找id是d1的div
div#d1 {
    color: red;
}

.d1 h1#h1{
    color: pink;
}

属性选择器

css
[password] {
    color: red;
}
html

<body>
    <h1 password="jason">五五五五呼呼呼呼</h1>

</body>

[password='jason'] {
    color: red;
}

h1[password] {
    color: blueviolet;
}

伪类选择器

"
a标签补充说明 针对没有点击过的网址默认是蓝色 点击过的 则为紫色
"
<a href="https://www.baidu.com">百度</a>
<a href="https://www.sugo.com">搜狗</a>

a:hover { # 鼠标悬浮到a标签显示的样式
    color: orange;
}

input:focus {  input 获取焦点(被点击)之后采用的样式
    background-color: blueviolet;
}

伪元素选择器

p:first-letter {
    font-size: 48px;
    color: red;
}

<p>今天风很大 余下的费城快</p>

p:before {
    content: '呼呼呼';
    color: pink;
}

p:after {
    content: '呀呀呀';
    color: red;
}

这前后的字都是选不到的

选择器的优先级

1.选择器相同 导入方式不同
	就近原则
    
2.选择器不同 导入方式相同
	内联样式 > id选择器 > 类选择器 > 标签选择器

CSS样式调节

字体样式
p {
    font-size: 14px;/* 一般 14, 24, 28, 36 */
    /*font-weight: bold;  !* 加粗*!*/
    /*font-weight: lighter;  !* 变细*!*/
    font-weight: normal; /*没有变化*/
}
    color:三种模式
        /*color: red;*/
        /*color: #3d3d3d;*/
        color: rgb(186,11,98);
p {
   color: rgba(186,11,98,0.5);
}

text-align: center		文本居中
text-decoration: none;  主要用于a标签取消下划线
text-indent: 32px;		首行缩进

"
取色器
1.pycharm
2.截图工具

"

背景属性
div {
    width: 800px;
    height: 800px;
    /*background-color: red;*/
    /*background-image: url("11.jpg");*/
    /*background-repeat: no-repeat;  !* 不让它铺 就一张图*!*/
    /*background-repeat: repeat-x;  !* 沿着X轴铺  横着*!*/
    /*background-repeat: repeat-y;  !* 沿着Y轴铺 竖着*!*/
    /*background-position: center;*/
    background: url("11.jpg") no-repeat center red;

}

当多个属性名有相同的前缀 那么可以简写一次性完成

posted @ 2022-12-01 20:49 可否阅读(31) 评论(0) 收藏举报

可否

前端之CSS

内容概要

内容详细

表单标签的补充说明

CSS层叠样式表

CSS选择器

选择器的优先级

CSS样式调节

公告