css第一天

来源：互联网发布：学生选课系统java实现编辑：程序博客网时间：2024/06/11 20:23

1css概念: css层叠样式表，css是用来美化html标签
2选择器
选择器是一个选择谁的过程
写法：选择器{属性:值;}
属性解释
Width：20px 元素宽度
Height:20px 高
Background-color 背景颜色
Font-size 文字大小
Text-align:left|center|right 内容的水平对齐方式
Text-index:2em; 首行缩进
3选择器
3.1基础选择器:
3.1.1标签选择器:
标签{属性:值;}
颜色的表达方式；
直接写颜色的名称
十六进制显示颜色
0-9 a-f
#000000;前两位代表红色,中间两位代表绿色,后面两位代表蓝色RGB

3.1.2类选择器(重点)

.自定义类名{属性:值;}
特点:谁调用谁生效；
一个标签可以调用多个类选择器：

<div class="box miss"></div>

自定义类名命名规则；
不可以用纯数字开头来定义类名
不能用特殊符号或特殊符号开头_除外
不建议使用汉字来定义类名
不推荐使用属性或者属性的值来定义类名

3.1.3id选择器

写法: #自定义名称{属性:值;}
特点:一个ID选择器在一个页面只能使用一次.如果使用2次或者2次以上,不符合w3c规范,js调用会出问题
一个标签只能调用一个id选择器
3.1.4通配符选择器
*{属性:值;}
不推荐使用增加浏览器和服务器负担
3.2复合选择器
两个或者两个基础的选择器通过不懂的方式连接在一起
3.2.1交集选择器；
div.box{}
div#miss{}
3.2.2后代选择器（重点）；
选择器+空格+选择器+空格+选择器{属性:值;}
特点:无限制隔代
只要能代表标签类选择器 id选择器可以自由组合
3.2.3子代选择器:
选择器>选择器{属性:值;}
特点:选择直接下一代元素.
3.2.4并集选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> div,#miss,span,h1{ font-size: 100px; color: #666; background-color: green; } </style> </head> <body> <div>威武</div> <p id="miss">霸气</p> <span>帅气</span> <h1>漂亮</h1> </body> </html>
escape(“微软雅黑”)
回车

<!DOCTYPE html><html lang="en">    <head>        <meta charset="utf-8">        <style type="text/css">            div.div1 ul.box li,div.div1 p{                color:red;            }            div.box p.p1,div.box div.div1 p,p{                color: blue;                font-weight: 700;/*100-900从700加粗 不推荐使用bold*/                font-family: 微软雅黑;                font-style: normal;/*normal默认 italic斜体*/                line-height: 40px;/*行高*/            }        </style>    </head>    <body>        <div class="div1">            <ul class="box">                <li>威武</li>            </ul>        </div>        <div class="div1">            <p>霸气</p>        </div>        <div class="box">            <p class="p1">ssssss</p>        </div>        <div class="box">            <div class="div1">                <p>ssss</p>            </div>        </div>        <p>            sssss<br>        </p>    </body></html>

font: italic 700 16px/40px 微软雅黑;

阅读全文

0 0