企业网站名是什么意思,青岛市建设工程管理信息网,万江做网站,怎么做电商网站 用户画像目录
CSS
css 的语法
1.字体大小 font-size
2.背景颜色 backgrount-color
3.背景的宽高 w h
css的三种引入方式
1.内嵌式
2.外联式
3.行内式
选择器
1.标签选择器
2.类选择器
3.id选择器
4.通配符选择器
字体和文本样式
1.字体样式
1.1字体大小 font-size
1.…目录
CSS
css 的语法
1.字体大小 font-size
2.背景颜色 backgrount-color
3.背景的宽高 w h
css的三种引入方式
1.内嵌式
2.外联式
3.行内式
选择器
1.标签选择器
2.类选择器
3.id选择器
4.通配符选择器
字体和文本样式
1.字体样式
1.1字体大小 font-size
1.2字体粗细 font-weight
1.3字体样式(倾斜) font-style
1.4字体类型 font-family
1.5字体类型 font属性连写
文本样式
1.文本缩进
2.文本水平对齐方式
3.文本修饰
4.行高 CSS
CSS 是层叠样式表, 层叠即覆盖
css 的语法
选择器 {css属性名: 属性值;} 选择器: 查找标签
1.字体大小 font-size
font-size: 30px;
px 即 像素
2.背景颜色 backgrount-color
background-color: yellow; 3.背景的宽高 w h
width: 100px;
height: 100px; css的三种引入方式
1.内嵌式
CSS 写在 style 标签中 (小案例)
style 标签虽然可以写在页面任意位置, 但是通常约定写在 head 标签中
2.外联式
CSS 写在一个单独的 .css 文件中 (项目中)
需要通过 link 标签在 .html 文件中引用
3.行内式
CSS 写在标签的 style 属性中 (配合js)
选择器
1.标签选择器
标签选择器是以标签名命名的选择器 结构: 标签名 {css属性名: 属性值;} 作用:通过标签名, 找到页面中所有这类标签, 设置样式
2.类选择器 结构: .类名 {css属性名: 属性值;} 类名可以由数字\字母\下划线\中划线组成, 但数字和中划线不能位于开头 一个标签可以同时有多个类名, 类名之间以空格隔开 类名可以重复, 一个类选择器可以同时选中多个标签
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.colorRed {color: red;}.s_i-z1e {font-size: 30px;}/style
/head
bodyp classcolorRed s_i-z1e类选择器p/pp不使用类选择器p/pdiv不使用类选择器div/div
/body
/html 3.id选择器
id选择器的初衷是配合 js 使用, 通常不会使用它来美化标签 结构: #id属性值{css属性名: 属性值;} 作用: 通过 id 属性值, 找到页面中带有这个 id 属性值的标签, 设置样式 所有标签上都有且仅有一个 id 属性值 一个 id 选择器只能选中一个标签, 它类似于身份证号码, 在一个页面中是唯一的
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle#back {background-color: greenyellow;}/style
/head
bodydiv不使用id选择器div/divdiv idbackid选择器div/div
/body
/html 4.通配符选择器 结构: * {css属性名: 属性值;} 作用: 找到页面中所有的标签, 设置样式
我们通常会用它来取消字体之间的间距(如 h1 造成的间距)
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {margin: 0;padding: 0;}/style
/head
bodyh1我是 h1 标签没有间距/h1div我们使用通配符选择器/div
/body
/html 字体和文本样式
1.字体样式
1.1字体大小 font-size
font-size: 30px;
1.2字体粗细 font-weight
取值可以是关键字, 也可以是纯数字 关键字
正常加粗normalbold 纯数字: 100~900的整百数
正常加粗400700
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.weight {font-weight: 700;}.weight2 {font-weight: 400;}/style
/head
bodydiv classweight字体变粗/divh1 classweight2字体正常/h1
/body
/html 1.3字体样式(倾斜) font-style
正常倾斜normalitalic
font-style: italic;
除此之外, em 标签也可以使字体倾斜, 它的效果可以被 font-style 的效果覆盖
em字体倾斜/em
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.i {font-style: italic;}.n {font-style: normal;}/style
/head
bodydiv classi字体倾斜/divem classnem被覆盖/em
/body
/html 1.4字体类型 font-family
我们无法得知用户电脑上安装了哪一种字体, 但是一定安装了一种无衬线字体
sans-serif 代表任意一种无衬线字体(笔画均匀且首尾无装饰)
font-family: 微软雅黑, 黑体, sans-serif;
1.5字体类型 font属性连写
font(复合属性)
顺序是 style weight size family
只能省略前两个, 如果省略了相当于设置了默认值
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.font {font: italic 700 60px 宋体;}/style
/head
bodydiv classfont展示字体/div
/body
/html 文本样式
1.文本缩进
text-indent: 2em
取值: 数字 px 数字 em (推荐, 1em 当前字体大小)
2.文本水平对齐方式
text-align
取值: 左对齐: left 居中对齐: center 右对齐: right
center 能让哪些元素水平居中: 文本 span 标签 a 标签 input 标签 img 标签
注意: 如果要让以上元素水平居中, align 需要给以上元素的父元素设置
3.文本修饰
text-decoration
取值: underline: 下划线 (常用) none: 无装饰线 (常用) line-through: 删除线 (不常用) overline: 上划线 (几乎不用) 无装饰线用于去除超链接的下划线 4.行高
line-height: 2
取值 数字 px 字体的倍数
