CSS-基础语法
CSS
全称Casading Style Sheets,层叠样式表,控制HTML标签的样式,在美化网页中起到非常重要的作用。
CSS编写格式是键值形式的,比如
color: red;
冒号:左边的是属性名,冒号:右边的是属性值.
①CSS中书写形式
1.行内样式(内联样式) 直接在标签的style属性中书写
<body style= “color:red;”>
案例:
<div style="color: blue; font-size: 28px; background-color: aliceblue"> <p style="color: red; border: 5px solid paleturquoise">我是段落</p> </div>
2.页内样式:在本网页的style标签中书写
<style> body { color: red; } </style>
案例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS页内样式</title> <style> div { color: red; font-size: 28px; border: 4px solid yellow; } p { color: blue; font-size: 28px; } </style> </head> <body> <div>我是容器标签</div> <p>我是段落标签</p> </body> </html>
3.外部样式:在单独的CSS文件中书写,然后在网页中用link标签引入
<!--引入外部样式--> <link rel="stylesheet" href="./css/index.css">
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS外部样式</title> <!--引入外部样式--> <link rel="stylesheet" href="./css/index.css"> </head> <body> <div>我是容器</div> <p>我是段落</p> </body> </html>
②CSS定义样式表
1>直接使用html标签定义选择器
<style> div { color: red; font-size: 28px; border: 4px solid yellow; } p { color: blue; font-size: 28px; } </style>
2>class定义:类名选择器,定义是以"."开始,.p{color: red},子类选择器 .baby text{color: blue;}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS选择器</title> <style> .container { color: red; font-size: 28px; border: 4px solid yellow; } </style> </head> <body> <div class="container">我是容器标签</div> </body> </html>
3>id定义:id选择器,定义是以"#"开始的,且只能出现一次。#p{color: blue;}
4>选择器优先级问题
(1)ID>Class>HTML ;
(2).同级时选择离元素最近的一个执行#p{color:red} #p{colod:#f60}执行颜色为#f60的.
(3). z-index 提高优先级
5>组合(并列)选择器:同时控制多个元素,多个元素之间用","隔开。
<!--组合选择器--> h1,h2,h3,.bb { font-size: 20px; color: red; }
6>复合选择器
7>后代选择器(一个标签包含另一个标签)
8>直接后代选择器
9>相邻兄弟选择器
10>属性选择器
11>伪元素选择器(伪类)
(1)a:link 未访问(正常)连接的样式
(2) a:hover 鼠标放上去元素的样式
(3) a:active 选择链接时的样式
(4)a:visited 已经访问过的链接的样式
(5) :focus向拥有键盘输入焦点的元素添加样式
(6) :first-child 向元素的第一个子元素添加样式
(7) :lang 向带有指定lang属性的元素添加样式
(8) :first-letter向文本的第一个字母添加特殊样式
(9) :first-line 向文本的首行添加特殊样式
(10) :before 在元素之前添加内容
(11) :after 在元素之后添加内容
<style type="text/css"> a:link { color: red; } a:hover { color: green; } a:active { color: yellow; } a:visited { color: lightgray; } </style>
选择器权重(数值越大,优先级越高,如果权值相同,后定义的优先级最高)
通配符:(*) 0
标签 1
类 10
属性 10
伪类 10
伪元素 10
id 100
important 1000
important使用
CSS规律
相同类型的选择器遵循
1.就近原则:如果对同一个标签设置了不同的样式,该标签会找最近的样式
2.叠加原则:同时导入页内样式和外部样式,页内样式不设置字体大小和颜色,该标签会使用外部样式。
3.范围越小,优先级越高
不同类型的选择器
③CSS常见属性:
CSS属性:根据继承性,主要分为两大类
可继承属性
父标签的属性值会传递给子标签
一般是文字控制属性
不可继承属性
父标签的属性值不能传递给子标签
一般是区块控制属性
所有标签可继承
visibility、cursor
内联标签可继承
letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction
块级标签可继承
text-indent、text-align
列表标签可继承
list-style、list-style-type、list-style-position、list-style-image
不可继承属性
display、margin、border、padding、background
height、min-height、max-height、width、min-width、max-width
overflow、position、left、right、top、bottom、z-index
float、clear
table-layout、vertical-align
page-break-after、page-bread-before
unicode-bidi
1.颜色属性
<!--color属性定义文本的颜色--> <!--1.英文单词color:green; --> <!--2.十六进制颜色值:color:#ff6600 简写式#f60--> <!--3. RGB颜色--> <!--红绿蓝RGB颜色,每个取值0~255:color:rgb(255,255,255)--> <!--RGBA 颜色,带透明度:color : rgba (255,255,255,1)--> <!-- 红色:color: rgb(255,0,0) --> <!--绿色:color: rgb(0,255,0) --> <!--蓝色:color: rgb(0,0,255) --> <!--白色:color: rgb(255,255,255)--> <!-- 黑色:color: rgb(0,0,0) -->
2.字体属性
1.font-size 字体大小
px:设置一个固定的值;%父元素的百分比;smaller 比父元素更小;larger 比父元素更大;inherit [ɪnˈherɪt] :继承父元素的
比如body设置字体20px ,那么子元素h1设置100% 是按照body 的百分比.
2.font-family 定义字体:font-family : 微软雅黑,serif;可以使用”,”隔开,可以确保当字体不存在的时候直接使用下一个
3.font-weight 字体加粗 normal :默认值 bold 粗 、bolder 更粗 、lighter、更细;normal = 400,bold = 700,100,200,300~900
4.font-style 字体样式 : normal:正常,标准 italic[ɪˈtælɪk]:斜体; oblique[əˈbli:k] 倾斜; inherit:继承 <em>默认会增加一个斜体
5.font-variant[ˈveəriənt] 变体 小型大写字母显示文字 :normal :标准; inherit:继承;small-caps :小型大写字母显示文字 小写变大写
3.背景属性
1.背景颜色:background-color
2.背景图片:background-image
3.背景展示方式:background-repeat : repeat :重复平铺满 repeat-x : 向x轴重复 repeat-y : 向y轴重复 no-repeat : 不重复
4.背景位置:background-position : 横向:(left,center,right) 纵向(top , center , bottom) ;还可以用数值来表示位置
简写方式:background: 背景颜色 url(图像) 重复 位置 ; background: #60 url(img/bg.jpg) no-repeat top center.
4.文本属性
1.text-align 横向排列 left ,center ,right
2.line-height 文本行高 : ①%基于字体大小的百分比行高②数值 来设置固定值
3.text-ident 首行缩进 % 父元素的百分比;px固定值,默认0; inherit 继承
4.letter-spacing : 字符间距 normal 默认; length 具体数值;inherit 继承
5.word-spacing : 单词间距 normal 默认; px 具体数值;inherit 继承
6.direction :文本方向 : ltr 从左到右,默认值; rtl 从右到左 ; inherit 继承
7.text-transform : 文本大小写 : none 默认 capitalize :每个单词以大写字母开头;uppercase 定义仅有大写字母 ; lowercase 定义仅有小写字母 inherit 继承父元素的text-transform .
5.边框属性
简写:border : solid 2px #f60;
1.边框风格:border-style
单独定义某一方向的边框样式。
border-bottom-style 下边边框样式
border-top-style 上边边框样式
border-left-style 左边边框样式
border-right-style 右边边框样式
边框风格样式的属性值:
① none 无边框 ②solid 直线边框 ③dashed 虚线边框④dotted 点状边框 ⑤double 双线边框 ⑥groove 凸槽边框⑦ridge 垄状边框 ⑧inset inset 边框 ⑨outset outset 边框 10.inherit 继承
2.边框宽度:
border-width 属性值: ①thin 细边框 ②medium 中等边框 ③thick 粗边框④px固定值⑤inherit继承
3.边框颜色:border-color 属性值的四种情况:
一个值:border : (上、下、左、右);
两个值:border : (上下) (左右); border-color: green red;上下为绿,左右为红
三个值:border : (上) (左、右) (下); border-color: green red yellow; 上边为绿色;下边为黄色;左右为红色
四个值:border : (上) (右) (下) (左);border-color: green red yellow darkcyan;上边为绿色;右边为红色;下边为黄色;左为青色
简写:border : solid 2px #f60;
6.列表属性
1.list-style-type 标记的类型
none :无标记;
disc默认,标记是实心圆;
circle 标记是空心圆 ;
square 标记是实心方块;
decimal 标记是数字[ˈdesɪml];
其他
decimal-leading-zero 0开头的数字标记。(01, 02, 03, 等。)
lower-roman 小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman 大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek 小写希腊字母(alpha, beta, gamma, 等。)
lower-latin 小写拉丁字母(a, b, c, d, e, 等。)
upper-latin 大写拉丁字母(A, B, C, D, E, 等。)
2.list-style-position 标记的位置 :
inside列表项目标记放置在文本以内,且环绕文本根据标记对齐。
outside默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外,且环绕文本不根据标记对齐。
inherit规定应该从父元素继承 list-style-position 属性的值。
3.list-style-image 设置图像列表标记 : URL 图像的路径;none 默认,无图形被显示 ; inherit 继承
4.list-style :简写方式 list-style : square inside url(‘i/arrow.jpg’);
7.文本框属性
input 设置光标出现时的边框样式
box-sizing: border-box;
其他
去掉a标签的线
text-decoration:none;
内外边距
*{/*通配符选择器*/
margin: 0 ;/*清除默认外边距*/
padding: 0;/*清除默认内边距*/
}
border-radius:0px; /*设置圆角*/
box-shadow: 0 0 7px red; /*设置阴影 水平位移 垂直位移 扩散程度 阴影颜色 第一个值正值往右;第二个值正值往下*/
button设置:
border: 0; /*去除Button的默认边框*/
outline:0; /*清除按钮点击时的默认选中边框*/
cursor: pointer;/*设置鼠标🖱放上去的时候,改变图标指示类型 小手指*/
//设置块阴影和文字阴影
<style> div{ width: 200px; height: 80px; margin: 30px; background-color: rgba(255,0,0,1.0); /*块阴影*/ box-shadow: 10px 10px 10px purple; border-top-left-radius: 100px; border-bottom-right-radius: 100px; } .test6{ color: red; font-size: 200px; /*文字阴影*/ text-shadow: 10px 10px 9px purple; } </style>优质内容筛选与推荐>>