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>