CSS一般写在<head>和</head>之间
新增<style></style>,代码写在这之间
代码:
<head>
<style>
p{/*具体改什么样式*/
/*属性名:属性值;*/
}
</style>
</head>
以上代码中p表示给<p></p>中的内容改样式
样式名:
字体属性:
font-size:npx 字体大小 ,n为具体数字,px表示像素
font-family: 文本字体
font-weight:n 纯数字无单位 n=700表示加粗 n=400表示正常粗细 100 < n < 900
font-style:文字样式 normal为正常 italic为斜体
font:属性连写 示例:
字体复合属性写法:
body{
font:font-style font-weight font-size/line-height font-family
}
不可更换顺序,其中 font-size 和 font-family 不可以省略
文本属性:
color:颜色 三种使用方法:
1.red blue ...
2.#FF0000(六个十六进制)
3.rgb(n,n,n)
text-align:文本对齐
1.left(默认)2.right 3.center
text-decoration:文本装饰
1.underline 下划线
2.line-through 删除线
3.overline 上划线
4.none 什么都没有(默认)
text-indent: 1.npx 首行缩进n个像素
2.nem 首行缩进n个文字大小
line-height:npx 行间距为n像素 行间距=上间距+文本高度+下间距
css 简单概括:选对象,改对象。
选对象要用选择器。
选择器分为基础选择器和复合选择器。
基础选择器:
标签选择器:如上代码,缺点是要改就全改,无法选中具体某个p。
类选择器可以单独选择一个或者某几个。
类选择器语法:(最常用)
.red{/*具体修改方式*/
}
<div class = "red">/*要修改的内容*/</div>
class的具体值自定义,但不可以用标签的名字
class可以有多个类名,不同类名之间空格
id选择器语法:
#red{/*具体修改方式*/
}
<div id = "red">/*要修改的内容*/</div>
id选择器只能调用一次,类选择器可以调用多次
通配符选择器:
*{/*修改方式*/
}
表示将所有元素统一修改,即全选
复合选择器:
后代选择器:
元素1 元素2{样式声明}:改变所有元素1里的元素2
可以继续添加元素3元素4
子选择器:
元素1>元素2{}
只选元素1的儿子元素2
并集选择器:
元素1,元素2{}
元素1和元素2一起改
链接伪类选择器:
a:link{} 未访问的链接
a:visited{} 访问过的链接
a:hover{} 鼠标经过时的链接
a:active{} 鼠标点击时的链接
以上四个标签顺序不可更改
实际常用方法为
a{}
a:hover{}
focus伪类选择器:
input:focus{} 光标点击时的input,其中的color属性更改文字颜色
css引入方式:
1.内部样式表:在html页面内部写样式,单独写到style标签里面。
2.行内样式表:直接在标签内部写 <p style="color:pink;line-height:16px;"></p>
3.外部样式表:
(1)新建一个后缀为.css的样式文件,把css代码都写在此文件中
(2)在HTML页面中使用<link>标签引入此文件
<link rel="stylesheet" href="css文件路径">