您的位置:首页 > Web前端 > CSS

前端笔记css

2019-03-26 23:11 176 查看

CSS:美化样式 Cascading Style Sheets
按照css的书写位置分为3类:
行内样式表(内联样式):将属性写在标签的style属性中,

青春


内部样式表:将style标签写在head标签中,包括选择器,选择器{属性:值;},对标签进行添加选择器,进行筛选。

外部样式表:将style标签写在一个css文件中,便于维护

color: red; } html中:
选择器 {属性:值;属性:值;}
选择器就是用来用选择标签的。
css基础选择器:
标签选择器(元素选择器):标签选择器是指用HTML标签名作为选择器,按标签名称分类,为页面中某一类标签指定统一的css样式。基本如法如下:
标签名{属性1:属性值1;属性2:属性值2;}或者元素名{属性1:属性值1;属性2:属性值2;}
最大的优点是:快速为页面中同类型的标签统一样式,同时这也是缺点,不能设计差异化样式。
(1)标签选择器

标签选择器其实就是我们经常说的html代码中的标签。例如html、span、p、div、a、img等等;比如我们想要设置网页中的p标签内一段文字的字体和颜色。

类选择器:.class {
color:blue;
}

hello
span标签http://www.w3school.com.cn/tags/tag_span.asp
选择器不建议使用下划线,因为js使用下划线的地方较多

导航栏

多类名选择器:将多个类的第一个的字体变大,该使用多类名选择器。
一个div标签中只可以有一个class属性

你好 注意:样式显示效果跟html元素中的类名先后顺序没有关系,受css样式书写的上下顺序有关 各个类名中间用空格隔开 id选择器: ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190327075426660.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Zha2VybG92ZQ==,size_16,color_FFFFFF,t_70) 类选择器,可以多次重复使用,但是id选择器不可重复使用,只可以使用一次,所以类选择器与id选择器的区别在于使用的次数。类选择器使用较多,类选择器使用在js方向。

通配符选择器:(开发使用的很少)

你好

哈哈

标签的机制就是盒子。
姑姑额默认字体大小为16号字
css的样式属性:
字号大小:font-size,单位:px(像素),em,in等
font-family:字体,先使用第一个,第一个不可使用就找第二个,如果都没有,就使用默认的字体。
font-weight:bold;/700;(没有单位,相当于bold)字体加粗
参数:normal,正常字体,相当于400;
font-style:字体风格
参数:normal;正常的字体
italic:斜体
字体连写:是有顺序的;选择器{font:font-style font-weight font-size;}

font-style:normal;/italic;取消倾斜/添加倾斜
font-weight:normal;/bold;加粗

开发者工具:chorm,通过f12进行对前端代码检查;或者右键点击检查;进行检查时,使用左上角的箭头进行检查,做测试html,右侧是css,
每一个属性赋值后都需要加分号;

复合选择器:
后代选择器:代表所有的后代,使用空格


王思聪




王思聪



子代选择器:只代表下一代,使用>进行分割
ui li > a{

}

并集选择器:,代表和,适合于相同样式的声明,使用场景较多

百度

实际开发:

百度

权重问题:

显示模式:display
块级元素:

-

    1. 等,一个占一行,默认宽度为100%,可以对其设置高度,宽度,对其等属性,常用于网页布局和网页结构的搭建。
      行内元素:
      元素都在同一行上,对其设置高与宽都是无效的,但水平方向的padding与margin是可以设置的,垂直方向的无效。
      默认宽度就是他本身内容的宽度,行内元素只可以容纳文本或者其他行内元素,a标签除外,因为a标签比较特殊。
      注意:只有文字才可以组成段落,因此p里面不可以放块级元素,同理这些标签h1-h6,dt,都是文字类块级标签,里面不可以放其他块级标签。
      链接里面不可以再放链接。
      块级元素与行内元素的区别:
      块级元素的特点:总是从新行开始;高度,行高,外边距以及内边距都可以控制。宽度默认是容器的100%;可以容纳其他内联元素和其他块级元素

行内元素的特点:和相邻行内元素在一行上;高度,宽度均不可被设置,但水平方向的padding和margin是可以设置的,垂直方向的无效;默认宽度是他本身的内容的宽度;行内元素只能容纳文本或者其他行内元素。

行内块状元素:在行内元素中有几个特殊的标签,例如,可以对他们设置宽度和对齐属性,所以可以称他们为行内块级元素。
行内块级元素的特点:和相邻的行内元素(行内块状元素)在一行上,但是之间会有空白缝隙,默认宽度是它本身内容的宽度,高度,宽度,外边距,以及内边距都可以控制。

标签显示模式是可以相互转换的。

inline:块级元素转换为行内元素
block:行内元素装换为块级元素
inline-block:行内元素转换为行内快级元素

拿到一个标签,首先设置宽度,高度,颜色
标签就是一个个盒子;

导航栏案例:

注意:选择器与{必须有一个空格
属性名与之后的:不允许包含空格,:与属性之间必须有空格。
(并集选择器)当一个rule包含多个selector时,每个选择器都必须占一行。
(后代选择器)一般不超过三级。
属性定义之后必须以;结尾。
行高的测量:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: