css基础认识

css是在head中设置

禁止用户改变文本域大小

<style type="text/css">

textarea{resize: none;}

</style>

type="text/css" 可有可无

div是body中的一个范围，css直接修改这个范围 这就是标签的选择器

修改颜色

div{color: rgb(234, 14, 14);} //范围

修改大小

suntingchao{font-size: 100px;}

id选择器

1.id跟身份证一样不能重复

2.id不推荐使用中文

3.需要加#

#s{color: rgb(123, 123, 123)}

<div id="s">我爱你</div>

<div>孙庭超</div>

class类选择器

1.类名可以重复

2.同一个标签可以使用多个类名用空格分开

3需要加.

4.不推荐使用中文

5.不允许数字开头

6.不允许除下划线和中划线以外的符号存在

.ai{font-size: 50px;}

.pp{color: rgb(143, 193, 56);}

<p class="ai pp">蜜雪冰城甜蜜蜜</p>

继承性和覆盖性

1.大盒子中的小盒子会继承大盒子

2.同一个盒子中，后面修改i覆盖前面

div{color: red;}

div{color: aqua;}

<div>

<span>

子承父业

</span>

</div>

后代选择器

1.直接用空格来实现

2.后代☞儿子☞孙子

3.可以使用类在使用后代选择器

div span{color: red;}

<div>

<p>

<span>

我是后代选择器

</span>

</p>

</div>

并列并集选择器

1.并列，并集一起修改加,

div,p,span{color: red;}

<div>并列</div>

<p>我是</p>

<span>你好</span>

#s，#t{font-size:50px;}

<div id="s">aaa</div>

<div id="t">sss</div>

基础选择器的权重

前提：针对同一个标签设置css才有权重之分

id>class>标签

继承的权重最低

复合权重器

（什么都没有权重值1，.权重值10，#权重值100）

.box span{} 权重 11

#box span{} 权重101

#box #span{}权重200

css外链式 在head中输入link

<link rel="stylesheet" href="css.css">

行内式 直接在里面修改

<div style="color: red">

我是行内修改

</div>

内嵌式css不用加载外部的css文件，网页加载速度就会相对而言更快一些

电商网站的首页对于打开文件速度有更高的要求

对比内嵌式，程序员最喜欢的是外链式，应为可以实现css和html代码的分离

方便代码的修改 除了电商网站首页需要，其他都用外链式

行内式css一定不要写，因为修改起来非常的不方便，还会导致页面的混乱

并且加载的时间会变慢

引入方式的权重（内嵌=外链）<行内式

盒子模型

盒子模型的组成部分

照片跟线框的距离（padding，内边距，内填充）

线框=边框线（border）

边框线与其他边框线的距离（margin，外边距，外填充）

backgroud：red 盒子的颜色为红色

border: 5px solid black; 线的宽度5px，solid为显示，bkack黑色

div{width: 100px;height: 100px; background:red;

border: 5px solid black;}

dashed 虚线

盒子可以单独设置每一边

border-top: 1px solid red;

border-bottom: 3px dashed rgb(87, 220, 160);

border-left: 5px solid rgb(70, 28, 209);

border-right: 7px dashed rgb(17, 14, 14);

/* 内边距内填充的padding的写法 */

padding-left: 20px;

padding-top: 20px;

padding-right: 20px;

padding-bottom: 20px;

/*两个值代表：前面这个上下，后面这个左右*/

padding：10px，20px

/*三个值代表：上 左右 下*/

padding：10px，20px，30px

/*四个值代表：上 右 下 左*/

padding：10px，20px，30px，40px

/* 外边距，一个值代表四个方向margin的写法 */

margin: 10px;

/*外边距四个值单独设置*/

margin-top: 20px;

margin-right:20px;

margin-left: 20px;

margin-bottom: 2opx;

/*两个值代表：前面这个上下，后面这个左右*/

margin：10px，20px

/*三个值代表：上 左右 下*/

margin：10px，20px，30px，

/*四个值代表：上 右 下 左*/

margin：10px，20px，30px，40px

<!-- 在html5中这届标签可以提高网站的语义化,从而提高搜索引擎对网站的排名 -->

<header>头</header>

<nav>导航</nav>

<aside>侧边栏</aside>

<article>文章</article>

<footer>底部</footer>

<!-- input要设置list的值,里面的值对应datalist中的id值,使他们连接起来

option中的value要删除，否则无法实现

. -->

用户可以自己输入

请填写你的座驾:

<inputtype="text" list="zj">

<datalistid="zj">

<option >奔驰</option>

<option >宝马</option>

<option >奥迪</option>

</datalist>

<!--required是来设置空判断的，autofocus是用来自动获取焦点，（刷新后固定位置）

autocomplete设置为on，默认为off（记录用户输入），name里面的值对应着我们提交的数据保存的文件名 -->

<formaction="a.php" method="get">

<inputtype="text" required="required"><br>

<inputtype="text" autofocus="autofocus"><br>

<inputtype="text" autocomplete="on"name="q"><br>

<inputtype="submit" value="提交">

</form>

<formaction="xx.php" method="get">

<!-- type="email"实现邮箱地址验证 -->

邮箱：<input type="email" > <br>

<!-- type="url"验证是否为网站，（包含http://）-->

网址：<input type="url"><br>

<!-- type="number"实现输入框只能输入数字 -->

数字：<input type="number"><br>

<!-- type="search"文本中最后位置出现X，点击把内容清空 -->

搜索：<input type="search"><br>

<!-- type="datetime-local"通过文本框让用户输入本地时间 -->

详细日期时间：<input type="datetime-local"><br>

<!-- 显示月份 -->

月份：<input type="month"><br>

<!-- 显示星期 -->

星期：<input type="week"><br>

<!-- 显示时间 -->

时间：<input type="time"><br>

<!-- 显示日期-->

日期：<input type="data"><br>

<!-- 显示滑块 -->

滑块：<input type="range"><br>

<inputtype="submit" value="提交">

</form>