前端入门part07css学习

css

  • 写在head标签中;
css的文字属性
  • 规定文字样式的属性;font-style:italic; 斜体;写下fs按下tab键直接生成
  • 规定文字粗细的属性;font-weight:bold; 加粗,取值分为单词和数字取值;比如bolder比bold还粗;lighter细线;写下fw+tab键
  • 规定文字大小的属性;font-size
  • 规定文字字体的属性;font-family;必须是用户已经安装的字体;
  • 需求:如果设定的字体不存在,又不想使用默认字体怎么办?
  • 比如本机电脑默认微软雅黑,可以在后面制定好备选方案。前端入门part07css学习_第1张图片
    格式:font-family:"字体一","字体二"
  • 如果想给英文和中文分别设置字体怎么办?
  • 但凡是中文字体,里面都包含了英文;
  • 但凡是英文字体,里面都没有包含中文
  • 所以,font-family:"英文字体","中文字体" 可实现需求;前后要注意
  • 需求:当以上四种属性都需要设置时,如何简单快速设置?
  • font:italic bold 10px "楷体" ;中间用空格隔开;①size和family不可以省略size要写在family前面且所有属性最后

在企业开发中,常见的字体有:

  • 中文:宋体、黑体、微软雅黑;
  • 英文:“Times New Roman”/Arial;
  • 注意:名称是英文的也可能为中文字体;是不是中文字体要看能否处理中文;
文本装饰的属性
  • 给加下划线: text-decoration: underline;
  • 给加上删除线:text-decoration: line-through;
  • 加上划线:text-decoration: overline;
  • 去掉任何装饰:text-decoration: none; 比如超链接去掉下面那条线
文本水平对齐的属性
  • 默认文本左对齐;text-align:center/right ;.
文本缩进的属性
  • text-indent:2em ;缩进俩字符;一个em代表缩进一个字符宽度;
标签选择器
  • 根据指定的标签名称,在当前界面找到所有该名称的标签,然后设置属性;
  • 格式 标签名称{属性:属性值}
  • 我们目前学过的所有标签都可以选择;
ID选择器
  • 根据指定的ID名称找到相应的标签,然后设置相应的属性;
  • 注意:ID选择器一定要在ID前面写上 #
  • ID名称有一定规范性,只可以由字母数字下划线组成;不可以数字开头
  • 在企业开发中,如果仅仅设置了样式,我们不会使用ID,因为ID是留给JS使用的
类选择器
  • 根据指定的类名称选择对应标签,然后设置属性;
  • 注意:类选择器一定要在前面加上.
  • 与ID不同,ID是唯一的,但是类名可以重复
  • 命名规范与ID命名相同
  • 类名就是专门给某个特定的标签设置样式的
  • 一个标签啥的可以同时有多个类名比如

id class
不可以重复 可以重复
一个HTML标签可以绑定一个ID 一个HTML标签可以绑定多个class名
#ID名 .class名
一般配合js使用 设置样式
后代选择器
  • 用于指定标签的所有后代标签,设置属性;
  • div p{属性:属性值} 先找到div的标签,再找div下面所有名称为p的标签,然后设置属性;
  • 注意:①后代选择器必须用空格隔开;②后代不仅仅是儿子,也包含孙子和重孙子③后代选择器不仅仅可以使用标签,也可以使用ID名称,类名称等;
子元素选择器
  • 在指定标签中所有特定的直接子元素,然后设置属性;标签名称1>标签名称2{};要用>符号连接;
  • 子元素选择器只会查找儿子,不会查找其他被嵌套的;

你可能感兴趣的:(前端入门,css)